@nulogy/components 14.8.2 → 15.0.1

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

@@ -0,0 +1,196 @@
+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, { useEffect, useRef, useState } from "react";
+import { action } from "@storybook/addon-actions";
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Button } from "../index";
+import Select from "./Select";
+import { CustomOption, getPhotos, options, partnerCompanyName, wrappingOptions, PCNList, errorList, CustomFieldsOption, } from "./Select.story.fixture";
+const SelectWithManyOptions = (_a) => {
+    var { multiselect, labelText } = _a, props = __rest(_a, ["multiselect", "labelText"]);
+    const [photoList, setPhotoList] = useState([]);
+    const setOptions = () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield getPhotos();
+        setPhotoList(result);
+    });
+    useEffect(() => {
+        setOptions();
+    }, []);
+    return React.createElement(Select, Object.assign({ multiselect: multiselect, options: photoList, labelText: labelText }, props));
+};
+class SelectWithState extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { selectedValue: "" };
+        this.handleChange = this.handleChange.bind(this);
+        this.clearSelection = this.clearSelection.bind(this);
+    }
+    handleChange(selectedValue) {
+        this.setState({ selectedValue });
+    }
+    clearSelection() {
+        this.setState({ selectedValue: "" });
+    }
+    render() {
+        const { selectedValue } = this.state;
+        return (React.createElement(Flex, { flexDirection: "column", gap: "x2", alignItems: "flex-start" },
+            React.createElement(Select, Object.assign({ className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options }, this.props)),
+            React.createElement(Button, { onClick: this.clearSelection }, "Clear selection")));
+    }
+}
+export default {
+    title: "Components/Select",
+};
+export const _Select = () => (React.createElement(Select, { options: options, autocomplete: boolean("autocomplete", true), className: text("className", undefined), classNamePrefix: text("classNamePrefix", undefined), closeMenuOnSelect: boolean("closeMenuOnSelect", true), disabled: boolean("disabled", false), defaultValue: select("defaultValue", [undefined, ...options.map(({ value }) => value)], undefined), errorMessage: text("errorMessage", ""), labelText: text("labelText", "Inventory Status"), helpText: text("helpText", undefined), noOptionsMessage: () => "No options", required: boolean("required", false), requirementText: text("requirementText", undefined), id: text("id", undefined), maxHeight: text("maxHeight", "248px"), menuPosition: select("menuPosition", ["absolute", "fixed"], "absolute"), multiselect: boolean("multiselect", false), name: text("name", undefined), placeholder: text("placeholder", " "), value: select("value", [undefined, ...options.map(({ value }) => value)], undefined), menuIsOpen: boolean("menuIsOpen", undefined), onMenuOpen: action("on menu open"), onMenuClose: action("on menu close"), onChange: action("selection changed"), onInputChange: action("typed input value changed"), onBlur: action("blurred") }));
+export const WithStyledProps = () => {
+    return (React.createElement(Select, { initialIsOpen: true, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), maxWidth: "300px", options: options, labelText: "Default size", onInputChange: action("typed input value changed") }));
+};
+export const WithABlankValue = () => {
+    const optionsWithBlank = [{ value: null, label: "" }, ...options];
+    return (React.createElement(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+};
+WithABlankValue.story = {
+    name: "with a blank value",
+};
+export const WithAnOptionSelected = () => (React.createElement(React.Fragment, null,
+    React.createElement(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
+    React.createElement("br", null),
+    React.createElement(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+WithAnOptionSelected.story = {
+    name: "with an option selected",
+};
+export const WithState = () => (React.createElement(SelectWithState, { selectedValue: "foo", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }));
+WithState.story = {
+    name: "with state",
+};
+export const SetToDisabled = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, onChange: action("selection changed"), onBlur: action("blurred"), disabled: true, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+SetToDisabled.story = {
+    name: "set to disabled",
+};
+export const WithErrorMessage = () => (React.createElement(React.Fragment, null,
+    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
+    React.createElement("br", null),
+    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+WithErrorMessage.story = {
+    name: "with error message",
+};
+export const WithErrorList = () => (React.createElement(React.Fragment, null,
+    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
+    React.createElement("br", null),
+    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+WithErrorList.story = {
+    name: "with error list",
+};
+export const Required = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, required: true, requirementText: "(Required)", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+Required.story = {
+    name: "set to required",
+};
+export const WithAClearButton = () => (React.createElement(Select, { isClearable: true, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithHelpText = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+WithHelpText.story = {
+    name: "with helpText",
+};
+export const WithCustomId = () => (React.createElement(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+WithCustomId.story = {
+    name: "with custom id",
+};
+export const WithSmallerMaxHeight = () => (React.createElement(Select, { initialIsOpen: true, maxHeight: "132px", value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+WithSmallerMaxHeight.story = {
+    name: "with smaller maxHeight",
+};
+export const WithWrappingText = () => (React.createElement(Select, { initialIsOpen: true, value: wrappingOptions[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+WithWrappingText.story = {
+    name: "With wrapping text",
+};
+export const WithMultiselect = (props) => {
+    return (React.createElement(Select, Object.assign({ defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true }, props)));
+};
+WithMultiselect.story = {
+    name: "with multiselect",
+};
+export const WithCloseMenuOnSelectTurnedOff = () => {
+    return (React.createElement(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, closeMenuOnSelect: false }));
+};
+WithCloseMenuOnSelectTurnedOff.story = {
+    name: "with closeMenuOnSelect turned off",
+};
+export const TestMultiselectOverflow = () => (React.createElement(React.Fragment, null,
+    React.createElement(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }),
+    React.createElement(Box, { width: "300px" },
+        React.createElement(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") })),
+    React.createElement(Box, { width: "400px" },
+        React.createElement(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }))));
+TestMultiselectOverflow.story = {
+    name: "test multiselect overflow",
+};
+export const WithFixedPositioning = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { style: {
+            position: "relative",
+            overflow: "hidden",
+            width: "300px",
+            height: "100px",
+        } },
+        React.createElement(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", menuPosition: "fixed" }))));
+WithFixedPositioning.story = {
+    name: "with fixed positioning",
+};
+export const WithFetchedOptions = () => (React.createElement(Box, { style: { width: "300px" } },
+    React.createElement(SelectWithManyOptions, { labelText: "Select from many options:" }),
+    React.createElement(SelectWithManyOptions, { multiselect: true, labelText: "Multiselect many options:" })));
+export const WithCustomOptionComponent = () => {
+    return (React.createElement(Box, { position: "relative", overflow: "hidden", width: "300px", height: "600px" },
+        React.createElement(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, components: {
+                Option: CustomOption,
+            }, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" })));
+};
+WithCustomOptionComponent.story = {
+    name: "with custom option component",
+};
+export const UsingRefToControlFocus = () => {
+    const multiSelectRef = useRef(null);
+    const handleClick = () => {
+        multiSelectRef.current.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, ref: multiSelectRef, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+};
+export const WithTopMenuPlacement = () => {
+    return (React.createElement(Flex, { height: "100vh", alignItems: "center", justifyContent: "center" },
+        React.createElement(Select, { options: options, menuPlacement: "top" })));
+};
+export const WithCustomStyles = () => {
+    return (React.createElement(Select, { options: options, menuPlacement: "top", styles: (styles) => {
+            return Object.assign(Object.assign({}, styles), { control: (provided, props) => (Object.assign(Object.assign({}, styles.control(provided, props)), { border: "2px solid lightblue" })) });
+        } }));
+};
+export const WithCustomOptionFields = () => {
+    const descriptiveOptions = [
+        { value: "accepted", label: "Accepted", description: "This item has been accepted" },
+        { value: "assigned", label: "Assigned to a line", description: "This item is assigned to a production line" },
+    ];
+    return (React.createElement(Select, { defaultValue: descriptiveOptions[0].value, options: descriptiveOptions, components: {
+            Option: CustomFieldsOption,
+        }, labelText: "Inventory status" }));
+};
+export const WithACustomNoOptionsMessage = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, noOptionsMessage: () => "No statuses found", labelText: "Inventory status", onInputChange: action("typed input value changed") }));

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, GroupBase } from "react-select";
-import { NDSOption } from "./Select";
-export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): React.JSX.Element;
+import React from "react";
+import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, GroupBase } from "react-select";
+import { NDSOption } from "./Select";
+export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): React.JSX.Element;

package/dist/src/Select/SelectComponents.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { components, } from "react-select";
+export function SelectControl(props) {
+    const { isFocused } = props;
+    return (React.createElement("div", { "data-testid": "select-control" },
+        React.createElement(components.Control, Object.assign({ className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused }, props), props.children)));
+}
+export function SelectMultiValue(props) {
+    return (React.createElement("div", { "data-testid": "select-multivalue" },
+        React.createElement(components.MultiValue, Object.assign({}, props), props.children)));
+}
+export function SelectClearIndicator(props) {
+    return (React.createElement("div", { "data-testid": "select-clear" },
+        React.createElement(components.ClearIndicator, Object.assign({}, props))));
+}
+export function SelectDropdownIndicator(props) {
+    return (React.createElement("div", { "data-testid": "select-arrow" },
+        React.createElement(components.DropdownIndicator, Object.assign({}, props))));
+}
+export function SelectMenu(props) {
+    return (React.createElement("div", { "data-testid": "select-dropdown" },
+        React.createElement(components.Menu, Object.assign({}, props), props.children)));
+}
+export function SelectContainer(props) {
+    return (React.createElement("div", { "data-testid": "select-container" },
+        React.createElement(components.SelectContainer, Object.assign({}, props), props.children)));
+}
+export function SelectInput(props) {
+    return (React.createElement("div", { "data-testid": "select-input" },
+        React.createElement(components.Input, Object.assign({}, props), props.children)));
+}

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

@@ -1,12 +1,12 @@
-import React from "react";
-import { GroupBase, OptionProps } from "react-select";
-import { NDSOption } from "./Select";
-type StyledOptionProps = {
-    isSelected: boolean;
-    isFocused: boolean;
-};
-export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
-export interface SelectOptionProps<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends OptionProps<Option, IsMulti, Group> {
-}
-export declare function SelectOption<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): React.JSX.Element;
-export {};
+import React from "react";
+import { GroupBase, OptionProps } from "react-select";
+import { NDSOption } from "./Select";
+type StyledOptionProps = {
+    isSelected: boolean;
+    isFocused: boolean;
+};
+export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
+export interface SelectOptionProps<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends OptionProps<Option, IsMulti, Group> {
+}
+export declare function SelectOption<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): React.JSX.Element;
+export {};

package/dist/src/Select/SelectOption.js

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import { components } from "react-select";
+import { typography } from "styled-system";
+import { subPx } from "../utils";
+import { variant } from "../StyledProps";
+export const StyledOption = styled.div(typography, ({ isSelected, isFocused, theme }) => ({
+    "&:last-child": {
+        borderBottomLeftRadius: theme.radii.medium,
+        borderBottomRightRadius: theme.radii.medium,
+    },
+    div: {
+        height: "auto",
+        padding: subPx(theme.space.x1),
+        fontWeight: isSelected ? theme.fontWeights.medium : theme.fontWeights.normal,
+        background: isFocused ? theme.colors.lightBlue : null,
+        minHeight: theme.space.x4,
+        minWidth: "max-content",
+        whiteSpace: "nowrap",
+        "&:hover": {
+            background: !isSelected ? theme.colors.lightBlue : null,
+            cursor: "pointer",
+        },
+    },
+}), ({ theme }) => variant({
+    variants: {
+        touch: {
+            div: {
+                padding: subPx(theme.space.x1),
+            },
+        },
+        desktop: {
+            div: {
+                padding: subPx(theme.space.x1),
+            },
+        },
+    },
+}));
+export function SelectOption(props) {
+    return (React.createElement(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option" },
+        React.createElement(components.Option, Object.assign({}, props), props.children)));
+}

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

@@ -1,40 +1,40 @@
-import type { GroupBase, MenuPlacement, StylesConfig } from "react-select";
-import type { CSSProperties } from "react";
-import type { DefaultNDSThemeType } from "../theme";
-import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type Placement = "top" | "bottom";
-export declare function getControlBorderRadius({ border, isMenuOpen, menuLength, menuPlacement, theme, }: {
-    border: Placement;
-    isMenuOpen: boolean;
-    menuLength: number;
-    menuPlacement: MenuPlacement;
-    theme: DefaultNDSThemeType;
-}): string | 0;
-export declare function getMenuBorderRadius({ border, menuPlacement, theme, }: {
-    border: Placement;
-    menuPlacement: MenuPlacement;
-    theme: DefaultNDSThemeType;
-}): {
-    radius: string | number;
-    style: CSSProperties["borderBottomStyle"];
-};
-type VariantConfig = {
-    [key in ComponentVariant]?: CSSProperties;
-};
-export declare function stylesForVariant(config: VariantConfig, variant?: ComponentVariant): CSSProperties;
-export declare function showIndicatorSeparator({ hasValue, isClearable, isMulti }: {
-    hasValue: any;
-    isClearable: any;
-    isMulti: any;
-}): any;
-interface CustomStylesArgs {
-    theme: DefaultNDSThemeType;
-    error: boolean;
-    maxHeight: string;
-    windowed: boolean;
-    variant: ComponentVariant;
-    hasIcon?: boolean;
-    hasDefaultOptions?: boolean;
-}
-declare const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(args: CustomStylesArgs) => StylesConfig<Option, IsMulti, Group>;
-export default customStyles;
+import type { GroupBase, MenuPlacement, StylesConfig } from "react-select";
+import type { CSSProperties } from "react";
+import type { DefaultNDSThemeType } from "../theme";
+import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type Placement = "top" | "bottom";
+export declare function getControlBorderRadius({ border, isMenuOpen, menuLength, menuPlacement, theme, }: {
+    border: Placement;
+    isMenuOpen: boolean;
+    menuLength: number;
+    menuPlacement: MenuPlacement;
+    theme: DefaultNDSThemeType;
+}): string | 0;
+export declare function getMenuBorderRadius({ border, menuPlacement, theme, }: {
+    border: Placement;
+    menuPlacement: MenuPlacement;
+    theme: DefaultNDSThemeType;
+}): {
+    radius: string | number;
+    style: CSSProperties["borderBottomStyle"];
+};
+type VariantConfig = {
+    [key in ComponentVariant]?: CSSProperties;
+};
+export declare function stylesForVariant(config: VariantConfig, variant?: ComponentVariant): CSSProperties;
+export declare function showIndicatorSeparator({ hasValue, isClearable, isMulti }: {
+    hasValue: any;
+    isClearable: any;
+    isMulti: any;
+}): any;
+interface CustomStylesArgs {
+    theme: DefaultNDSThemeType;
+    error: boolean;
+    maxHeight: string;
+    windowed: boolean;
+    variant: ComponentVariant;
+    hasIcon?: boolean;
+    hasDefaultOptions?: boolean;
+}
+declare const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(args: CustomStylesArgs) => StylesConfig<Option, IsMulti, Group>;
+export default customStyles;

package/dist/src/Select/customReactSelectStyles.js

@@ -0,0 +1,162 @@
+import { transparentize } from "polished";
+import numberFromDimension from "../utils/numberFromDimension";
+const getBorderColor = ({ errored, disabled, isOpen, isFocused, theme, }) => {
+    const { red, lightGrey, blue, grey } = theme.colors;
+    if (errored)
+        return red;
+    if (disabled)
+        return lightGrey;
+    if (isOpen || isFocused)
+        return blue;
+    return grey;
+};
+const getShadow = ({ errored, isOpen, theme }) => {
+    if (!isOpen)
+        return null;
+    const { focus, error } = theme.shadows;
+    if (errored) {
+        return error;
+    }
+    else {
+        return focus;
+    }
+};
+export function getControlBorderRadius({ border, isMenuOpen, menuLength, menuPlacement, theme, }) {
+    const isMenuEmpty = menuLength === 0;
+    if (!isMenuOpen || isMenuEmpty || border !== menuPlacement)
+        return theme.radii.medium;
+    return 0;
+}
+export function getMenuBorderRadius({ border, menuPlacement, theme, }) {
+    return border === menuPlacement ? { radius: theme.radii.medium, style: "solid" } : { radius: 0, style: "none" };
+}
+export function stylesForVariant(config, variant = "desktop") {
+    return config[variant];
+}
+export function showIndicatorSeparator({ hasValue, isClearable, isMulti }) {
+    return hasValue && (isMulti || isClearable);
+}
+const customStyles = ({ theme, error, maxHeight, windowed, hasIcon, variant, hasDefaultOptions = true, }) => {
+    return {
+        option: () => ({
+            height: 38,
+        }),
+        clearIndicator: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.midGrey })),
+        control: (provided, state) => (Object.assign(Object.assign(Object.assign({}, provided), { display: "flex", minHeight: theme.space.x5, paddingLeft: theme.space.x1, position: "relative", width: "100%", fontSize: theme.fontSizes.base, lineHeight: theme.lineHeights.base, color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : theme.colors.black, background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white, borderColor: getBorderColor({
+                errored: error,
+                disabled: state.isDisabled,
+                isOpen: state.selectProps.menuIsOpen,
+                isFocused: state.isFocused,
+                theme,
+            }), boxSizing: "border-box", boxShadow: getShadow({
+                errored: error,
+                isOpen: state.selectProps.menuIsOpen,
+                theme,
+            }), borderRadius: theme.radii.medium, borderBottomLeftRadius: getControlBorderRadius({
+                border: "bottom",
+                isMenuOpen: state.selectProps.menuIsOpen,
+                menuLength: state.selectProps.options.length,
+                menuPlacement: state.selectProps.menuPlacement,
+                theme: theme,
+            }), borderBottomRightRadius: getControlBorderRadius({
+                border: "bottom",
+                isMenuOpen: state.selectProps.menuIsOpen,
+                menuLength: state.selectProps.options.length,
+                menuPlacement: state.selectProps.menuPlacement,
+                theme: theme,
+            }), borderTopRightRadius: getControlBorderRadius({
+                border: "top",
+                isMenuOpen: state.selectProps.menuIsOpen,
+                menuLength: state.selectProps.options.length,
+                menuPlacement: state.selectProps.menuPlacement,
+                theme: theme,
+            }), borderTopLeftRadius: getControlBorderRadius({
+                border: "top",
+                isMenuOpen: state.selectProps.menuIsOpen,
+                menuLength: state.selectProps.options.length,
+                menuPlacement: state.selectProps.menuPlacement,
+                theme: theme,
+            }), "&:hover, &:focus": {
+                borderColor: getBorderColor({
+                    errored: error,
+                    disabled: state.isDisabled,
+                    isOpen: state.selectProps.menuIsOpen,
+                    isFocused: true,
+                    theme,
+                }),
+            } }), (hasIcon && {
+            paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,
+        }))),
+        dropdownIndicator: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), (!hasDefaultOptions && { display: "none" })), { color: theme.colors.midGrey })),
+        indicatorsContainer: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.midGrey })),
+        singleValue: (provided) => (Object.assign(Object.assign({}, provided), { marginLeft: 2, marginRight: 2, position: "absolute", top: "50%", transform: "translateY(-50%)" })),
+        valueContainer: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), { padding: 0, display: "flex", overflow: "auto", maxHeight: "150px", gap: theme.space.half, paddingTop: theme.space.none, paddingBottom: theme.space.none }), stylesForVariant({
+            touch: {
+                fontSize: "md",
+                lineHeight: "base",
+            },
+        }, variant))),
+        menu: (provided, state) => (Object.assign(Object.assign({}, provided), { marginTop: 0, marginBottom: 0, position: "absolute", overflowX: "auto", zIndex: 100, width: "100%", background: theme.colors.white, borderWidth: "1px", borderColor: getBorderColor({
+                errored: error,
+                isOpen: true,
+                isFocused: false,
+                theme,
+            }), borderLeftStyle: "solid", borderRightStyle: "solid", borderBottomStyle: getMenuBorderRadius({
+                border: "bottom",
+                menuPlacement: state.selectProps.menuPlacement,
+                theme,
+            }).style, borderTopStyle: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
+                .style, borderBottomLeftRadius: getMenuBorderRadius({
+                border: "bottom",
+                menuPlacement: state.selectProps.menuPlacement,
+                theme,
+            }).radius, borderBottomRightRadius: getMenuBorderRadius({
+                border: "bottom",
+                menuPlacement: state.selectProps.menuPlacement,
+                theme,
+            }).radius, borderTopLeftRadius: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
+                .radius, borderTopRightRadius: getMenuBorderRadius({
+                border: "top",
+                menuPlacement: state.selectProps.menuPlacement,
+                theme,
+            }).radius, boxShadow: getShadow({ errored: error, isOpen: true, theme }) })),
+        menuList: (provided) => (Object.assign(Object.assign({}, provided), { minWidth: "fit-content", padding: 0, maxHeight: numberFromDimension(maxHeight), borderRadius: theme.radii.medium, marginTop: windowed ? "-4px" : 0, marginBottom: windowed ? "-4px" : 0 })),
+        multiValue: (provided) => (Object.assign(Object.assign({}, provided), { background: theme.colors.lightGrey, color: theme.colors.black, margin: 0 })),
+        multiValueLabel: () => (Object.assign({ textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", color: theme.colors.black, borderRadius: theme.radii.small, fontSize: theme.fontSizes.small, padding: theme.space.half, paddingLeft: theme.space.x1 }, stylesForVariant({
+            touch: {
+                fontSize: "md",
+                lineHeight: "base",
+            },
+        }, variant))),
+        multiValueRemove: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), { svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 }, borderBottomLeftRadius: 0, borderTopLeftRadius: 0, padding: theme.space.half, paddingLeft: theme.space.x1, "&:hover": {
+                background: theme.colors.darkGrey,
+                cursor: "pointer",
+                svg: { fill: theme.colors.white },
+            } }), stylesForVariant({
+            touch: {
+                fontSize: "md",
+                lineHeight: "base",
+            },
+        }, variant))),
+        noOptionsMessage: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.black, fontSize: theme.fontSizes.small })),
+        indicatorSeparator: (provided, state) => (Object.assign(Object.assign({}, provided), { display: showIndicatorSeparator({
+                hasValue: state.hasValue,
+                isClearable: state.selectProps.isClearable,
+                isMulti: state.isMulti,
+            })
+                ? "block"
+                : "none", borderLeft: `1px solid ${theme.colors.grey}` })),
+        placeholder: (state) => {
+            return {
+                label: "placeholder",
+                marginLeft: 2,
+                marginRight: 2,
+                position: "absolute",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: state.isDisabled ? transparentize(0.7, theme.colors.midGrey) : theme.colors.midGrey,
+            };
+        },
+    };
+};
+export default customStyles;

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

@@ -1,3 +1,3 @@
-export { SelectOption, type SelectOptionProps } from "./SelectOption";
-export { default as Select, type NDSOption, type NDSOptionValue, type NDSSelectProps } from "./Select";
-export * from "./SelectComponents";
+export { SelectOption, type SelectOptionProps } from "./SelectOption";
+export { default as Select, type NDSOption, type NDSOptionValue, type NDSSelectProps } from "./Select";
+export * from "./SelectComponents";

package/dist/src/Select/index.js

@@ -0,0 +1,3 @@
+export { SelectOption } from "./SelectOption";
+export { default as Select } from "./Select";
+export * from "./SelectComponents";

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

@@ -1,21 +1,21 @@
-import { OnChangeValue, Options, PropsValue } from "react-select";
-import { NDSOption, NDSOptionValue } from "./Select";
-export declare function calcOptionsLength(options: any): any;
-export declare function flattenGroupedChildren(children: any): any;
-export declare function isFocused({ props: { isFocused } }: {
-    props: {
-        isFocused: any;
-    };
-}): boolean;
-export declare function getCurrentIndex(children: any): number;
-export declare function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }: {
-    groupHeadingStyles: any;
-    noOptionsMsgStyles: any;
-    optionStyles: any;
-    loadingMsgStyles: any;
-}): (child: any) => any;
-export declare function checkOptionsAreValid(options: Options<NDSOption>): void;
-export declare function getOption(options: Options<NDSOption>, value: PropsValue<NDSOptionValue>): any;
-export declare function getReactSelectValue(options: Options<NDSOption>, input: PropsValue<NDSOptionValue>): any;
-export type CustomOnChangeValue<IsMulti extends boolean> = IsMulti extends true ? NDSOptionValue[] : NDSOptionValue;
-export declare function extractValue<IsMulti extends boolean>(options: OnChangeValue<NDSOption, IsMulti>, isMulti: IsMulti): CustomOnChangeValue<IsMulti>;
+import { OnChangeValue, Options, PropsValue } from "react-select";
+import { NDSOption, NDSOptionValue } from "./Select";
+export declare function calcOptionsLength(options: any): any;
+export declare function flattenGroupedChildren(children: any): any;
+export declare function isFocused({ props: { isFocused } }: {
+    props: {
+        isFocused: any;
+    };
+}): boolean;
+export declare function getCurrentIndex(children: any): number;
+export declare function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }: {
+    groupHeadingStyles: any;
+    noOptionsMsgStyles: any;
+    optionStyles: any;
+    loadingMsgStyles: any;
+}): (child: any) => any;
+export declare function checkOptionsAreValid(options: Options<NDSOption>): void;
+export declare function getOption(options: Options<NDSOption>, value: PropsValue<NDSOptionValue>): any;
+export declare function getReactSelectValue(options: Options<NDSOption>, input: PropsValue<NDSOptionValue>): any;
+export type CustomOnChangeValue<IsMulti extends boolean> = IsMulti extends true ? NDSOptionValue[] : NDSOptionValue;
+export declare function extractValue<IsMulti extends boolean>(options: OnChangeValue<NDSOption, IsMulti>, isMulti: IsMulti): CustomOnChangeValue<IsMulti>;