@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Select/Select.d.ts

@@ -1,32 +1,32 @@
-import React, { ReactNode } from "react";
-import Select from "react-select/base";
-import { PropsValue } from "react-select";
-import type { GroupBase, Props, StylesConfig } from "react-select";
-import { StyledProps } from "../StyledProps";
-import { CustomOnChangeValue } from "./lib";
-export type NDSOptionValue = string | number | boolean | null;
-export interface NDSOption {
-    label: ReactNode;
-    value: NDSOptionValue;
-}
-interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
-    autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
-    labelText?: string;
-    requirementText?: string;
-    helpText?: ReactNode;
-    disabled?: Props<Option, IsMulti, Group>["isDisabled"];
-    errorMessage?: string;
-    errorList?: string[];
-    initialIsOpen?: Props<Option, IsMulti, Group>["defaultMenuIsOpen"];
-    multiselect?: Props<Option, IsMulti, Group>["isMulti"];
-    maxHeight?: string;
-    defaultValue?: PropsValue<Option["value"]>;
-    value?: PropsValue<Option["value"]>;
-    options: readonly Option[];
-    onChange?: (newValue: CustomOnChangeValue<IsMulti>) => void;
-    windowThreshold?: number;
-    styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
-}
-export type NDSSelectProps<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<Props<Option, IsMulti, Group>, keyof CustomProps<Option, IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<Option, IsMulti, Group>;
-declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: Omit<Props<Option, IsMulti, Group>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<Option_1, IsMulti_1, Group_1>> & CustomProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
-export default NDSSelect;
+import React, { ReactNode } from "react";
+import Select from "react-select/base";
+import { PropsValue } from "react-select";
+import type { GroupBase, Props, StylesConfig } from "react-select";
+import { StyledProps } from "../StyledProps";
+import { CustomOnChangeValue } from "./lib";
+export type NDSOptionValue = string | number | boolean | null;
+export interface NDSOption {
+    label: ReactNode;
+    value: NDSOptionValue;
+}
+interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
+    autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
+    labelText?: string;
+    requirementText?: string;
+    helpText?: ReactNode;
+    disabled?: Props<Option, IsMulti, Group>["isDisabled"];
+    errorMessage?: string;
+    errorList?: string[];
+    initialIsOpen?: Props<Option, IsMulti, Group>["defaultMenuIsOpen"];
+    multiselect?: Props<Option, IsMulti, Group>["isMulti"];
+    maxHeight?: string;
+    defaultValue?: PropsValue<Option["value"]>;
+    value?: PropsValue<Option["value"]>;
+    options: readonly Option[];
+    onChange?: (newValue: CustomOnChangeValue<IsMulti>) => void;
+    windowThreshold?: number;
+    styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
+}
+export type NDSSelectProps<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<Props<Option, IsMulti, Group>, keyof CustomProps<Option, IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<Option, IsMulti, Group>;
+declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: Omit<Props<Option, IsMulti, Group>, "isMulti" | "isDisabled" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<Option_1, IsMulti_1, Group_1>> & CustomProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
+export default NDSSelect;

package/dist/src/Select/Select.js

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import ReactSelect from "react-select";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
+import { Field } from "../Form";
+import { MaybeFieldLabel } from "../FieldLabel";
+import { InlineValidation } from "../Validation";
+import customStyles from "../Select/customReactSelectStyles";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { getSubset } from "../utils/subset";
+import numberFromDimension from "../utils/numberFromDimension";
+import { addStyledProps } from "../StyledProps";
+import { SelectControl, SelectMultiValue, SelectClearIndicator, SelectContainer, SelectInput, SelectDropdownIndicator, SelectMenu, } from "./SelectComponents";
+import { SelectOption } from "./SelectOption";
+import MenuList from "./MenuList";
+import { calcOptionsLength, checkOptionsAreValid, extractValue, getReactSelectValue } from "./lib";
+const NDSSelect = forwardRef((_a, ref) => {
+    var { value, onChange, defaultValue, labelText, requirementText, helpText, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+    const { t } = useTranslation();
+    const variant = useComponentVariant();
+    const theme = useTheme();
+    const styledProps = getSubset(props, addStyledProps);
+    const error = !!(errorMessage || errorList);
+    const optionsRef = React.useRef(options);
+    const optionsLength = React.useMemo(() => calcOptionsLength(options), [options]);
+    const isWindowed = optionsLength >= windowThreshold;
+    noOptionsMessage || (noOptionsMessage = () => t("no options"));
+    React.useEffect(() => {
+        checkOptionsAreValid(options);
+        optionsRef.current = options;
+    }, [options]);
+    const stylesConfig = customStyles({
+        theme: theme,
+        error,
+        variant,
+        maxHeight,
+        windowed: options.length > windowThreshold,
+    });
+    return (React.createElement(Field, Object.assign({}, styledProps),
+        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
+            React.createElement(ReactSelect, Object.assign({ ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
+                    if (!onChange)
+                        return;
+                    const value = extractValue(newValue, multiselect);
+                    onChange(value);
+                }, placeholder: placeholder || t("select"), "aria-required": required, required: required, "aria-invalid": error, inputId: id, styles: styles ? styles(stylesConfig) : stylesConfig, components: Object.assign(Object.assign({ Option: (props) => React.createElement(SelectOption, Object.assign({}, props), props.children), Control: SelectControl, MultiValue: SelectMultiValue, ClearIndicator: SelectClearIndicator, DropdownIndicator: SelectDropdownIndicator, SelectContainer: SelectContainer, Menu: SelectMenu, Input: SelectInput }, (isWindowed ? { MenuList } : {})), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: classNamePrefix, menuPosition: menuPosition, menuPlacement: menuPlacement, maxMenuHeight: numberFromDimension(maxHeight), noOptionsMessage: noOptionsMessage }, props)),
+            React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList }))));
+});
+export default NDSSelect;

package/dist/src/Select/Select.spec-utils.d.ts

@@ -1,5 +1,5 @@
-import { Matcher, SelectorMatcherOptions } from "@testing-library/react";
-type QueryByText = (id: Matcher, options?: SelectorMatcherOptions) => HTMLElement;
-export declare const openDropdown: (element: HTMLElement, i: number) => void;
-export declare const selectOption: (optionText: string, container: HTMLElement, queryByText: QueryByText, i?: number) => void;
-export {};
+import { Matcher, SelectorMatcherOptions } from "@testing-library/react";
+type QueryByText = (id: Matcher, options?: SelectorMatcherOptions) => HTMLElement;
+export declare const openDropdown: (element: HTMLElement, i: number) => void;
+export declare const selectOption: (optionText: string, container: HTMLElement, queryByText: QueryByText, i?: number) => void;
+export {};

package/dist/src/Select/Select.spec-utils.js

@@ -0,0 +1,14 @@
+import { fireEvent } from "@testing-library/react";
+export const openDropdown = (element, i) => {
+    fireEvent.focus(element.querySelectorAll("input")[i]);
+    fireEvent.keyDown(element.querySelectorAll("input")[i], {
+        key: "ArrowDown",
+        code: 40,
+    });
+};
+export const selectOption = (optionText, container, queryByText, i = 0) => {
+    expect(queryByText(optionText)).toBeNull();
+    openDropdown(container, i);
+    expect(queryByText(optionText)).not.toBeNull();
+    fireEvent.click(queryByText(optionText));
+};

package/dist/src/Select/Select.story.d.ts

@@ -1,110 +1,110 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Select: () => React.JSX.Element;
-export declare const WithStyledProps: () => React.JSX.Element;
-export declare const WithABlankValue: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAnOptionSelected: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithState: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorMessage: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorList: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Required: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAClearButton: () => React.JSX.Element;
-export declare const WithHelpText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomId: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSmallerMaxHeight: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithWrappingText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithMultiselect: {
-    (props: any): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCloseMenuOnSelectTurnedOff: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const TestMultiselectOverflow: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithFixedPositioning: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithFetchedOptions: () => React.JSX.Element;
-export declare const WithCustomOptionComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
-export declare const WithTopMenuPlacement: () => React.JSX.Element;
-export declare const WithCustomStyles: () => React.JSX.Element;
-export declare const WithCustomOptionFields: () => React.JSX.Element;
-export declare const WithACustomNoOptionsMessage: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Select: () => React.JSX.Element;
+export declare const WithStyledProps: () => React.JSX.Element;
+export declare const WithABlankValue: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAnOptionSelected: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithState: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorMessage: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorList: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Required: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAClearButton: () => React.JSX.Element;
+export declare const WithHelpText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomId: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithSmallerMaxHeight: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithWrappingText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithMultiselect: {
+    (props: any): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCloseMenuOnSelectTurnedOff: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const TestMultiselectOverflow: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithFixedPositioning: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithFetchedOptions: () => React.JSX.Element;
+export declare const WithCustomOptionComponent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const UsingRefToControlFocus: () => React.JSX.Element;
+export declare const WithTopMenuPlacement: () => React.JSX.Element;
+export declare const WithCustomStyles: () => React.JSX.Element;
+export declare const WithCustomOptionFields: () => React.JSX.Element;
+export declare const WithACustomNoOptionsMessage: () => React.JSX.Element;

package/dist/src/Select/Select.story.fixture.d.ts

@@ -1,24 +1,24 @@
-import React from "react";
-import { GroupBase } from "react-select";
-import { SelectOptionProps } from "./SelectOption";
-import { NDSOption } from "./Select";
-export declare const errorList: string[];
-export declare const options: NDSOption[];
-export declare const partnerCompanyName: {
-    value: string;
-    label: string;
-}[];
-export declare const wrappingOptions: {
-    value: string;
-    label: string;
-}[];
-export declare const PCNList: {
-    value: string;
-    label: string;
-}[];
-export declare const getPhotos: () => Promise<any>;
-export declare const CustomOption: ({ children, ...props }: SelectOptionProps<NDSOption, true, GroupBase<NDSOption>>) => React.JSX.Element;
-export interface DescriptiveOption extends NDSOption {
-    description: string;
-}
-export declare const CustomFieldsOption: ({ ...props }: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => React.JSX.Element;
+import React from "react";
+import { GroupBase } from "react-select";
+import { SelectOptionProps } from "./SelectOption";
+import { NDSOption } from "./Select";
+export declare const errorList: string[];
+export declare const options: NDSOption[];
+export declare const partnerCompanyName: {
+    value: string;
+    label: string;
+}[];
+export declare const wrappingOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const PCNList: {
+    value: string;
+    label: string;
+}[];
+export declare const getPhotos: () => Promise<any>;
+export declare const CustomOption: ({ children, ...props }: SelectOptionProps<NDSOption, true, GroupBase<NDSOption>>) => React.JSX.Element;
+export interface DescriptiveOption extends NDSOption {
+    description: string;
+}
+export declare const CustomFieldsOption: ({ ...props }: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => React.JSX.Element;

package/dist/src/Select/Select.story.fixture.js

@@ -0,0 +1,89 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { SelectOption } from "./SelectOption";
+export const errorList = ["Error message 1", "Error message 2"];
+export const options = [
+    { value: "accepted", label: "Accepted" },
+    { value: "assigned", label: "Assigned to a line" },
+    { value: "hold", label: "On hold" },
+    { value: "rejected", label: "Rejected" },
+    { value: "open", label: "Open" },
+    { value: "progress", label: "In progress" },
+    { value: "quarantine", label: "In quarantine" },
+];
+export const partnerCompanyName = [
+    { value: "2", label: "PCN2 12387387484895884957848576867587685780" },
+    { value: "4", label: "PCN4 12387387484895884957848576867587685780" },
+    { value: "1", label: "PCN1 12387387484895884957848576867587685780" },
+    { value: "9", label: "PCN9 12387387484895884957848576867587685780" },
+    { value: "7", label: "PCN7 12387387484895884957848576867587685780" },
+    { value: "6", label: "PCN6 12387387484895884957848576867587685780" },
+    { value: "3", label: "PCN3 12387387484895884957848576867587685780e" },
+];
+export const wrappingOptions = [
+    {
+        value: "onestring",
+        label: "Onelongstringonelongstringonelongstringonelongstringonelongstringonelongstringonelongstringonelongstringonelongstringonelongstringonelongstring",
+    },
+    {
+        value: "manywords",
+        label: "Many words many words many words many words many words many words many words many words many words many words many words many words many words",
+    },
+];
+export const PCNList = [
+    { value: "2", label: "PCN2" },
+    { value: "4", label: "PCN4" },
+    { value: "1", label: "PCN1" },
+    { value: "9", label: "PCN9" },
+];
+export const getPhotos = () => __awaiter(void 0, void 0, void 0, function* () {
+    // returns 5000 items
+    const data = yield fetch("https://jsonplaceholder.typicode.com/photos");
+    const json = yield data.json();
+    return json.map(({ title, id }) => ({
+        label: title,
+        value: id,
+    }));
+});
+const Indicator = styled.span(() => ({
+    borderRadius: "25%",
+    background: "green",
+    lineHeight: "0",
+    display: "inline-block",
+    width: "10px",
+    height: "10px",
+    marginRight: "5px",
+}));
+export const CustomOption = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const newChildren = (React.createElement(React.Fragment, null,
+        React.createElement(Indicator, null),
+        children));
+    return React.createElement(SelectOption, Object.assign({}, props), newChildren);
+};
+export const CustomFieldsOption = (_a) => {
+    var props = __rest(_a, []);
+    return (React.createElement(SelectOption, Object.assign({}, props),
+        React.createElement("span", null, props.data.label),
+        React.createElement("span", null, props.data.description)));
+};