@epignosis_llc/gnosis 5.0.5 → 5.0.7

package/dist/types/components/FormElements/Select/Select.stories.d.ts

@@ -1,23 +1,105 @@
 import React from "react";
 import { Story } from "@storybook/react";
-import { SelectProps } from "./Select";
+import { CustomSelectProps, CustomOption } from "./types";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<{
-        status?: "error" | "valid" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+    component: React.ForwardRefExoticComponent<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>, "theme" | "form" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "group" | "name" | "autoFocus" | "value" | "required" | "isClearable" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "innerPlaceholder" | "hasInnerSearch" | "onMenuInputFocus"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>, "styles" | "placeholder" | "tabIndex" | "aria-live" | "isLoading" | "pageSize" | "classNames" | "isSearchable" | "options" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "components" | "controlShouldRenderValue" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isDisabled" | "isOptionDisabled" | "isMulti" | "isRtl" | "loadingMessage" | "minMenuHeight" | "maxMenuHeight" | "menuIsOpen" | "menuPlacement" | "menuPosition" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "noOptionsMessage" | "openMenuOnFocus" | "openMenuOnClick" | "screenReaderStatus" | "tabSelectsValue" | "unstyled">> & Partial<Pick<{
+        'aria-live': string;
+        backspaceRemovesValue: boolean;
+        blurInputOnSelect: boolean;
+        captureMenuScroll: boolean;
+        classNames: {};
+        closeMenuOnSelect: boolean;
+        closeMenuOnScroll: boolean;
+        components: {};
+        controlShouldRenderValue: boolean;
+        escapeClearsValue: boolean;
+        filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+        formatGroupLabel: <Option_1, Group_1 extends import("react-select").GroupBase<Option_1>>(group: Group_1) => string;
+        getOptionLabel: <Option_2>(option: Option_2) => string;
+        getOptionValue: <Option_3>(option: Option_3) => string;
+        isDisabled: boolean;
+        isLoading: boolean;
+        isMulti: boolean;
+        isRtl: boolean;
+        isSearchable: boolean;
+        isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+        loadingMessage: () => string;
+        maxMenuHeight: number;
+        minMenuHeight: number;
+        menuIsOpen: boolean;
+        menuPlacement: string;
+        menuPosition: string;
+        menuShouldBlockScroll: boolean;
+        menuShouldScrollIntoView: boolean;
+        noOptionsMessage: () => string;
+        openMenuOnFocus: boolean;
+        openMenuOnClick: boolean;
+        options: never[];
+        pageSize: number;
+        placeholder: string;
+        screenReaderStatus: ({ count }: {
+            count: number;
+        }) => string;
+        styles: {};
+        tabIndex: number;
+        tabSelectsValue: boolean;
+        unstyled: boolean;
+    }, never>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>, "theme" | "form" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "group" | "name" | "autoFocus" | "value" | "required" | "isClearable" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "innerPlaceholder" | "hasInnerSearch" | "onMenuInputFocus"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>, "styles" | "placeholder" | "tabIndex" | "aria-live" | "isLoading" | "pageSize" | "classNames" | "isSearchable" | "options" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "components" | "controlShouldRenderValue" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isDisabled" | "isOptionDisabled" | "isMulti" | "isRtl" | "loadingMessage" | "minMenuHeight" | "maxMenuHeight" | "menuIsOpen" | "menuPlacement" | "menuPosition" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "noOptionsMessage" | "openMenuOnFocus" | "openMenuOnClick" | "screenReaderStatus" | "tabSelectsValue" | "unstyled">> & Partial<Pick<{
+        'aria-live': string;
+        backspaceRemovesValue: boolean;
+        blurInputOnSelect: boolean;
+        captureMenuScroll: boolean;
+        classNames: {};
+        closeMenuOnSelect: boolean;
+        closeMenuOnScroll: boolean;
+        components: {};
+        controlShouldRenderValue: boolean;
+        escapeClearsValue: boolean;
+        filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+        formatGroupLabel: <Option_1, Group_1 extends import("react-select").GroupBase<Option_1>>(group: Group_1) => string;
+        getOptionLabel: <Option_2>(option: Option_2) => string;
+        getOptionValue: <Option_3>(option: Option_3) => string;
+        isDisabled: boolean;
+        isLoading: boolean;
+        isMulti: boolean;
+        isRtl: boolean;
+        isSearchable: boolean;
+        isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+        loadingMessage: () => string;
+        maxMenuHeight: number;
+        minMenuHeight: number;
+        menuIsOpen: boolean;
+        menuPlacement: string;
+        menuPosition: string;
+        menuShouldBlockScroll: boolean;
+        menuShouldScrollIntoView: boolean;
+        noOptionsMessage: () => string;
+        openMenuOnFocus: boolean;
+        openMenuOnClick: boolean;
+        options: never[];
+        pageSize: number;
+        placeholder: string;
+        screenReaderStatus: ({ count }: {
+            count: number;
+        }) => string;
+        styles: {};
+        tabIndex: number;
+        tabSelectsValue: boolean;
+        unstyled: boolean;
+    }, never>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<CustomOption> & {
         label?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
         inline?: boolean | undefined;
-        onChange?: ((selectedValue: string) => void) | undefined;
-        containerAttrs?: React.HTMLAttributes<HTMLDivElement> | undefined;
-    } & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "label" | "size" | "onChange" | "status" | "inline" | "containerAttrs"> & React.RefAttributes<HTMLSelectElement>>;
+        status?: "error" | "valid" | undefined;
+        hasInnerSearch?: boolean | undefined;
+        innerPlaceholder?: string | undefined;
+    } & React.RefAttributes<import("react-select").SelectInstance<CustomOption, false, import("react-select").GroupBase<CustomOption>>>>;
     args: {
         size: string;
         label: string;
         inline: boolean;
         id: string;
-        className: string;
-        status: string;
     };
     argTypes: {
         size: {
@@ -26,10 +108,29 @@ declare const _default: {
                 options: string[];
             };
         };
-        dir: {
+        isRtl: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isClearable: {
+            control: {
+                type: string;
+            };
+        };
+        isMulti: {
+            control: {
+                type: string;
+            };
+        };
+        hasInnerSearch: {
             control: {
                 type: string;
-                options: string[];
             };
         };
         status: {
@@ -45,5 +146,8 @@ declare const _default: {
     decorators: ((Story: Story<import("@storybook/react").Args>) => JSX.Element)[];
 };
 export default _default;
-export declare const Default: Story<SelectProps>;
-export declare const Disabled: Story<SelectProps>;
+export declare const Default: Story<CustomSelectProps<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>>;
+export declare const withGroupedOptions: Story<CustomSelectProps<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>>;
+export declare const withInnerSearch: Story<CustomSelectProps<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>>;
+export declare const withMultipleValues: Story<CustomSelectProps<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>>;
+export declare const Disabled: Story<CustomSelectProps<CustomOption, boolean, import("react-select").GroupBase<CustomOption>>>;

package/dist/types/components/FormElements/Select/components/CustomMenuList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CustomMenuListProps, CustomOption } from "../types";
+declare const CustomMenuList: FC<CustomMenuListProps<CustomOption, boolean>>;
+export default CustomMenuList;

package/dist/types/components/FormElements/Select/components/CustomValueContainer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CustomValueContainerProps, CustomOption } from "../types";
+declare const CustomValueContainer: React.FC<CustomValueContainerProps<CustomOption, boolean>>;
+export default CustomValueContainer;

package/dist/types/components/FormElements/Select/data.d.ts

@@ -0,0 +1,24 @@
+export interface ColourOption {
+    value: string;
+    label: string;
+    color: string;
+    isFixed?: boolean;
+    isDisabled?: boolean;
+}
+type OptionType = {
+    label: string;
+    value: string;
+};
+export declare const colourOptions: ColourOption[];
+export interface FlavourOption {
+    value: string;
+    label: string;
+}
+export declare const flavourOptions: FlavourOption[];
+export interface GroupedOption {
+    label: string;
+    options: ColourOption[] | FlavourOption[];
+}
+export declare const groupedOptions: GroupedOption[];
+export declare const defaultOptions: OptionType[];
+export {};

package/dist/types/components/FormElements/Select/styles.d.ts

@@ -1,6 +1,7 @@
 import { SerializedStyles, Theme } from "@emotion/react";
 import { InputSize } from "../Input/Input";
-export declare const selectContainer: ({ formElements }: Theme, { size, dir }: {
+export declare const selectContainer: ({ formElements }: Theme, { size, inline }: {
     size: InputSize;
-    dir: string;
+    inline: boolean;
 }) => SerializedStyles;
+export declare const customMenuList: () => SerializedStyles;

package/dist/types/components/FormElements/Select/types.d.ts

@@ -0,0 +1,30 @@
+import type { GroupBase, MenuListProps, Props, ValueContainerProps } from "react-select";
+export type Status = "valid" | "error";
+export type CustomOption = {
+    label: string;
+    value: string;
+};
+declare module "react-select/dist/declarations/src/Select" {
+    interface Props<Option extends CustomOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+        innerPlaceholder?: string;
+        hasInnerSearch?: boolean;
+        isMulti: IsMulti;
+        group?: Group;
+        onMenuInputFocus?: () => void;
+    }
+}
+export type CustomSelectProps<Option extends CustomOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Props<Option, IsMulti, Group> & {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    inline?: boolean;
+    status?: "valid" | "error";
+    hasInnerSearch?: boolean;
+    innerPlaceholder?: string;
+};
+export type CustomMenuListProps<Option extends CustomOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = MenuListProps<Option, IsMulti, Group> & {
+    innerPlaceholder?: string;
+    hasInnerSearch?: boolean;
+};
+export type CustomValueContainerProps<Option extends CustomOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = ValueContainerProps<Option, IsMulti, Group> & {
+    isFocused?: boolean;
+};

package/dist/types/components/FormElements/styles.d.ts

@@ -1,5 +1,10 @@
 import { SerializedStyles, Theme } from "@emotion/react";
 import { InputSize } from "./Input/Input";
+export declare const inputHeight: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export declare const inputContainerBaseStyles: ({ block, }: {
     block: boolean;
 }) => SerializedStyles;

package/dist/types/theme/default/config/formElements.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
         background: string;
         backgroundFocus: string;
         iconColor: string;
+        iconHoverColor: string;
         hoverColor: string;
         disabledColor: string;
         disabledBackground: string;

package/dist/types/theme/default/defaultTheme.d.ts

@@ -199,6 +199,7 @@ declare const defaultTheme: {
             background: string;
             backgroundFocus: string;
             iconColor: string;
+            iconHoverColor: string;
             hoverColor: string;
             disabledColor: string;
             disabledBackground: string;

package/icons/index.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.0.4
+   * @epignosis_llc/gnosis.js v5.0.6
    * Released under the MIT license.
    */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epignosis_llc/gnosis",
-  "version": "5.0.5",
+  "version": "5.0.7",
   "description": "Epignosis official react design system.",
   "homepage": "https://github.com/epignosis/gnosis",
   "main": "dist/cjs/index.js",
@@ -103,6 +103,7 @@
     "framer-motion": "^6.5.1",
     "react-modal": "^3.16.1",
     "react-player": "^2.11.0",
+    "react-select": "^5.7.4",
     "react-spinners": "^0.13.6",
     "tslib": "^2.4.1"
   },