@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/public/components/ScrollSpy/ScrollSpy.js

@@ -0,0 +1,224 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSpyActions = exports.ScrollSpySelectors = exports.ScrollSpyReducers = exports.ScrollSpyStateProvider = exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.ScrollSpyInput = exports.useScrollSpyInputProps = exports.useScrollSpyContext = exports.ScrollSpyContext = exports.useScrollSpyStateContext = exports.ScrollSpyStateContext = void 0;
+const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../utilities");
+const hooks_1 = require("../../hooks");
+const reducers_1 = require("./reducers");
+const selectors_1 = require("./selectors");
+const actions_1 = require("./actions");
+const cn = utilities_1.bemHOF("ScrollSpy");
+const DEFAULT_ID = "scroll-spy-1";
+const initialContextState = {
+    state: reducers_1.scrollSpyInitialState,
+    dispatch: () => { },
+};
+exports.ScrollSpyStateContext = react_1.createContext(initialContextState);
+function useScrollSpyStateContext() {
+    const context = react_1.useContext(exports.ScrollSpyStateContext) || {
+        ...initialContextState,
+    };
+    return context;
+}
+exports.useScrollSpyStateContext = useScrollSpyStateContext;
+const defaultRootContext = {
+    id: DEFAULT_ID,
+    itemCount: 1,
+    defaultIndex: 0,
+    updateCurrentRef: () => { },
+    scrollToRef: () => { },
+    scrollToFirst: () => { },
+    scrollToLast: () => { },
+    scrollToPage: () => { },
+    skipToPage: () => { },
+};
+exports.ScrollSpyContext = react_1.createContext(defaultRootContext);
+function useScrollSpyContext() {
+    const context = react_1.useContext(exports.ScrollSpyContext) || {
+        ...defaultRootContext,
+    };
+    return context;
+}
+exports.useScrollSpyContext = useScrollSpyContext;
+const useScrollSpyInputProps = ({ className, onChange, }) => {
+    const { dispatch, state } = useScrollSpyStateContext();
+    const { itemCount, skipToPage } = useScrollSpyContext();
+    const currentPage = selectors_1.selectCurrentPage(state);
+    const onChangeHandler = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const pageNumber = parseInt(event.target.value, 10);
+        const index = pageNumber - 1;
+        dispatch(actions_1.updateIndex(index));
+        if (pageNumber && pageNumber >= 1 && pageNumber <= itemCount) {
+            skipToPage(pageNumber);
+        }
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    return {
+        className: classnames_1.default(cn({ e: "input" }), className),
+        type: "number",
+        min: "1",
+        max: itemCount,
+        maxLength: itemCount.toString().split("").length,
+        onChange: onChangeHandler,
+        value: currentPage,
+    };
+};
+exports.useScrollSpyInputProps = useScrollSpyInputProps;
+exports.ScrollSpyInput = react_1.memo(react_1.forwardRef(({ className, ...rest }, forwardedRef) => {
+    const props = exports.useScrollSpyInputProps({ className });
+    return react_1.default.createElement("input", Object.assign({ ref: forwardedRef }, props, rest));
+}));
+const useScrollSpyPageProps = ({ index, id } = { index: 0 }) => {
+    const { id: rootId } = useScrollSpyContext();
+    const pageId = `${rootId}-page-${index + 1}`;
+    return {
+        id: id || pageId,
+    };
+};
+exports.useScrollSpyPageProps = useScrollSpyPageProps;
+exports.ScrollSpyPage = react_1.memo(react_1.forwardRef(({ id: idProp, children, index, threshold = 0.5, ...rest }, forwardedRef) => {
+    const ref = react_1.useRef(null);
+    const combinedRef = react_merge_refs_1.default([ref, forwardedRef]);
+    const isVisible = hooks_1.useIntersection(ref, {
+        threshold,
+    });
+    const { dispatch } = useScrollSpyStateContext();
+    const { updateCurrentRef } = useScrollSpyContext();
+    const { id } = exports.useScrollSpyPageProps({ index, id: idProp });
+    react_1.useEffect(() => {
+        if (ref && ref.current) {
+            updateCurrentRef(index, ref.current);
+        }
+    });
+    react_1.useEffect(() => {
+        if (isVisible) {
+            dispatch(actions_1.updateIndex(index));
+        }
+    }, [isVisible]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.cloneElement(react_1.Children.only(children), {
+        ...rest,
+        ...children.props,
+        id,
+        ref: combinedRef,
+    })));
+}));
+const useScrollSpyAnchorProps = ({ index, id, href, onClick } = { index: 0 }) => {
+    const { id: rootId, scrollToPage } = useScrollSpyContext();
+    const { id: pageId } = exports.useScrollSpyPageProps({ index });
+    const anchorId = `${rootId}-anchor-${index + 1}`;
+    const { state } = useScrollSpyStateContext();
+    const currentIndex = selectors_1.selectCurrentIndex(state);
+    const onClickHandler = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        scrollToPage(index + 1);
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    return {
+        id: id || anchorId,
+        href: href || `#${pageId}`,
+        onClick: onClickHandler,
+        isActive: currentIndex === index,
+    };
+};
+exports.useScrollSpyAnchorProps = useScrollSpyAnchorProps;
+exports.ScrollSpyAnchor = react_1.memo(react_1.forwardRef(({ id, children, onClick, index = 0, ...rest }, forwardedRef) => {
+    const { isActive, ...anchorProps } = exports.useScrollSpyAnchorProps({
+        index,
+        id,
+        onClick,
+    });
+    return (react_1.default.createElement("a", Object.assign({ ref: forwardedRef }, anchorProps, rest), children));
+}));
+exports.ScrollSpyRoot = react_1.memo(({ children, itemCount, defaultIndex = 0, id = DEFAULT_ID, }) => {
+    const refList = react_1.useRef([]);
+    const prefersReducedMotion = hooks_1.usePrefersReducedMotion();
+    const scrollBehavior = prefersReducedMotion ? "auto" : "smooth";
+    react_1.useEffect(() => {
+        refList.current = refList.current.slice(0, itemCount);
+    }, [itemCount]);
+    const updateCurrentRef = (index, refItem) => {
+        refList.current[index] = refItem;
+    };
+    const scrollToRef = (refToScrollTo, behavior = "smooth") => {
+        refToScrollTo.scrollIntoView({ behavior });
+    };
+    const scrollToFirst = (event) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[0], scrollBehavior);
+    };
+    const scrollToLast = (event) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[itemCount - 1], scrollBehavior);
+    };
+    const scrollToPage = (page) => {
+        const index = page - 1;
+        scrollToRef(refList.current[index], scrollBehavior);
+    };
+    const skipToPage = (page) => {
+        const index = page - 1;
+        scrollToRef(refList.current[index], "auto");
+    };
+    react_1.useEffect(() => {
+        const lastIndex = itemCount - 1;
+        if (defaultIndex > 0 && defaultIndex <= lastIndex) {
+            skipToPage(defaultIndex + 1);
+        }
+    }, [defaultIndex, itemCount]);
+    const context = react_1.useMemo(() => {
+        return {
+            id,
+            itemCount,
+            defaultIndex,
+            updateCurrentRef,
+            scrollToRef,
+            scrollToFirst,
+            scrollToLast,
+            scrollToPage,
+            skipToPage,
+        };
+    }, [id, itemCount, defaultIndex]);
+    return (react_1.default.createElement(exports.ScrollSpyContext.Provider, { value: context }, children));
+});
+const ScrollSpyStateProvider = ({ children, }) => {
+    const [state, dispatch] = react_1.useReducer(reducers_1.reducer, {
+        index: 0,
+        page: 1,
+    });
+    const value = react_1.useMemo(() => ({ state, dispatch }), [state]);
+    return (react_1.default.createElement(exports.ScrollSpyStateContext.Provider, { value: value }, children));
+};
+exports.ScrollSpyStateProvider = ScrollSpyStateProvider;
+exports.ScrollSpyReducers = { reducer: reducers_1.reducer };
+exports.ScrollSpySelectors = { selectCurrentIndex: selectors_1.selectCurrentIndex, selectCurrentPage: selectors_1.selectCurrentPage };
+exports.ScrollSpyActions = { updateIndex: actions_1.updateIndex };

package/public/components/ScrollSpy/actions.d.ts

@@ -0,0 +1,5 @@
+import { ScrollSpyActionType } from "./types";
+export declare const updateIndex: (index: number) => {
+    type: ScrollSpyActionType;
+    index: number;
+};

package/public/components/ScrollSpy/actions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateIndex = void 0;
+const types_1 = require("./types");
+const updateIndex = (index) => {
+    return {
+        type: types_1.ScrollSpyActionType.UPDATE,
+        index,
+    };
+};
+exports.updateIndex = updateIndex;

package/public/components/ScrollSpy/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ScrollSpy";
+export * from "./types";

package/public/components/{Appbar → ScrollSpy}/index.js

@@ -10,4 +10,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Appbar"), exports);
+__exportStar(require("./ScrollSpy"), exports);
+__exportStar(require("./types"), exports);

package/public/components/ScrollSpy/reducers.d.ts

@@ -0,0 +1,6 @@
+import { ScrollSpyState, ScrollSpyAction } from "./types";
+export declare const scrollSpyInitialState: {
+    index: number;
+    page: number;
+};
+export declare const reducer: (state: ScrollSpyState | undefined, action: ScrollSpyAction) => ScrollSpyState;

package/public/components/ScrollSpy/reducers.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.scrollSpyInitialState = void 0;
+const types_1 = require("./types");
+exports.scrollSpyInitialState = {
+    index: 0,
+    page: 1,
+};
+const reducer = (state = exports.scrollSpyInitialState, action) => {
+    switch (action.type) {
+        case types_1.ScrollSpyActionType.UPDATE:
+            return state.index !== action.index
+                ? {
+                    ...state,
+                    index: action.index,
+                    page: action.index + 1,
+                }
+                : state;
+        default:
+            return state;
+    }
+};
+exports.reducer = reducer;

package/public/components/ScrollSpy/selectors.d.ts

@@ -0,0 +1,3 @@
+import { ScrollSpyState } from "./types";
+export declare const selectCurrentIndex: (state: ScrollSpyState) => number;
+export declare const selectCurrentPage: (state: ScrollSpyState) => number;

package/public/components/ScrollSpy/selectors.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectCurrentPage = exports.selectCurrentIndex = void 0;
+const selectCurrentIndex = (state) => state.index;
+exports.selectCurrentIndex = selectCurrentIndex;
+const selectCurrentPage = (state) => state.page;
+exports.selectCurrentPage = selectCurrentPage;

package/public/components/ScrollSpy/types.d.ts

@@ -0,0 +1,11 @@
+export declare enum ScrollSpyActionType {
+    UPDATE = "UPDATE"
+}
+export declare type ScrollSpyState = {
+    index: number;
+    page: number;
+};
+export declare type ScrollSpyAction = {
+    type: ScrollSpyActionType;
+    index: number;
+};

package/public/components/ScrollSpy/types.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSpyActionType = void 0;
+var ScrollSpyActionType;
+(function (ScrollSpyActionType) {
+    ScrollSpyActionType["UPDATE"] = "UPDATE";
+})(ScrollSpyActionType = exports.ScrollSpyActionType || (exports.ScrollSpyActionType = {}));

package/public/components/Select/Select.d.ts

@@ -5,7 +5,9 @@ import { Props as ReactSelectAsyncProps } from "react-select/async";
 declare type ArrowSelectProps = {
     menuInPortal?: boolean;
     menuRef?: Ref<HTMLDivElement>;
+    selectRef?: Ref<HTMLDivElement>;
     height?: number;
+    optionsMessage?: string;
 };
 export declare type SelectProps = ReactSelectProps & ArrowSelectProps;
 export declare type SelectCreatableProps = ReactSelectCreatableProps<any> & ArrowSelectProps;
@@ -19,7 +21,7 @@ export declare type SelectBaseProps = ({
 } & SelectAsyncProps);
 declare const Select: {
     (props: SelectProps): JSX.Element;
-    Creatable: (props: SelectCreatableProps) => JSX.Element;
+    Creatable: ({ createOptionPosition, ...rest }: SelectCreatableProps) => JSX.Element;
     Async: (props: SelectAsyncProps) => JSX.Element;
 };
 export { Select };

package/public/components/Select/Select.js

@@ -28,7 +28,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_select_1 = __importStar(require("react-select"));
 const creatable_1 = __importDefault(require("react-select/creatable"));
 const async_1 = __importDefault(require("react-select/async"));
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const Box_1 = require("../Box");
@@ -37,6 +37,7 @@ const FormGroupContext_1 = require("../FormGroup/FormGroupContext");
 const Icon_1 = require("../Icon");
 const CloseButton_1 = require("../CloseButton");
 const Token_1 = require("../Token");
+const Text_1 = require("../Text");
 const theme_1 = require("./theme");
 const cn = utilities_1.bemHOF("Select");
 const MultiValue = ({ removeProps, selectProps, children, }) => {
@@ -71,12 +72,15 @@ const adsComponents = {
 const getClassNames = (classNameProp, variant) => {
     return classnames_1.default([cn(), cn({ m: variant }), classNameProp]);
 };
-const getMenuListComponent = (menuRef) => ({ innerRef, children, ...listRest }) => (react_1.default.createElement(react_select_1.components.MenuList, Object.assign({ innerRef: innerRef }, listRest),
-    react_1.default.createElement(Box_1.Box, { ref: menuRef }, children)));
-const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, components, styles, }) => {
-    const customComponents = menuInPortal
-        ? { ...adsComponents, MenuList: getMenuListComponent(menuRef) }
-        : adsComponents;
+const getMenuListComponent = ({ menuRef, optionsMessage, }) => ({ innerRef, children, options, ...listRest }) => (react_1.default.createElement(react_select_1.components.MenuList, Object.assign({ innerRef: innerRef, options: options }, listRest),
+    react_1.default.createElement(Box_1.Box, { ref: menuRef },
+        react_1.default.createElement(Box_1.Box, null, children),
+        options.length > 0 && optionsMessage && (react_1.default.createElement(Text_1.Text, { className: "text-gray-600 text-icon leading-normal px-3 py-2" }, optionsMessage)))));
+const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, components, optionsMessage, styles, }) => {
+    const customComponents = {
+        ...adsComponents,
+        MenuList: getMenuListComponent({ menuRef, optionsMessage }),
+    };
     return {
         components: { ...customComponents, ...components },
         menuPortalTarget: menuInPortal ? document.body : undefined,
@@ -84,14 +88,14 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
             ...styles,
             menuPortal: (base) => ({
                 ...base,
-                zIndex: tokens_1.zIndex.max,
+                zIndex: tokens_1.tokens.zIndex.max,
             }),
             singleValue: (base, state) => {
                 return {
                     ...base,
                     paddingLeft: state.selectProps.isSearchable ? "2px" : "0",
                     color: state.selectProps.menuIsOpen && state.selectProps.isSearchable
-                        ? tokens_1.colors.gray["600"]
+                        ? tokens_1.tokens.color.gray["600"]
                         : base.color,
                 };
             },
@@ -106,7 +110,7 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
         },
     };
 };
-const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.height["10"]), menuInPortal = false, menuRef, components, styles, ...rest }) => {
+const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.tokens.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, selectRef, ...rest }) => {
     const { variant: variantContext, id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
@@ -116,20 +120,21 @@ const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id:
         menuRef,
         styles,
         components,
+        optionsMessage,
     });
     if (rest.type === "async") {
-        return (react_1.default.createElement(async_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
+        return (react_1.default.createElement(async_1.default, Object.assign({ ref: selectRef, className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
     }
     if (rest.type === "creatable") {
-        return (react_1.default.createElement(creatable_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps, { createOptionPosition: "first" })));
+        return (react_1.default.createElement(creatable_1.default, Object.assign({ ref: selectRef, className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
     }
-    return (react_1.default.createElement(react_select_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
+    return (react_1.default.createElement(react_select_1.default, Object.assign({ ref: selectRef, className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
 };
 const SelectAsync = (props) => {
     return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "async" }));
 };
-const SelectCreatable = (props) => {
-    return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "creatable" }));
+const SelectCreatable = ({ createOptionPosition = "first", ...rest }) => {
+    return (react_1.default.createElement(SelectBase, Object.assign({ createOptionPosition: createOptionPosition }, rest, { type: "creatable" })));
 };
 const Select = (props) => {
     return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "default" }));

package/public/components/Select/SelectPopover.d.ts

@@ -5,11 +5,17 @@ interface SelectPopoverProps {
     cancelButton: ReactNode;
     onCancelEdit: () => void;
     selectProps: SelectProps;
+    heading?: string;
+    label?: string;
+    showLabel?: boolean;
     preventOutsideClick?: boolean;
     optionsMessage?: string;
+    helpTip?: ReactNode;
     isCreatable?: boolean;
     className?: string;
     style?: CSSProperties;
+    popoverStyle?: CSSProperties;
+    hideCloseButton?: boolean;
 }
-export declare const SelectPopover: ({ readView, cancelButton, onCancelEdit, preventOutsideClick, optionsMessage, isCreatable, selectProps, className, style, }: SelectPopoverProps) => JSX.Element;
+export declare const SelectPopover: ({ readView, cancelButton, onCancelEdit, heading, label, showLabel, preventOutsideClick, optionsMessage, helpTip, isCreatable, selectProps, className, style, popoverStyle, hideCloseButton, }: SelectPopoverProps) => JSX.Element;
 export {};

package/public/components/Select/SelectPopover.js

@@ -26,7 +26,7 @@ exports.SelectPopover = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const hooks_1 = require("../../hooks");
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
@@ -37,7 +37,9 @@ const CloseButton_1 = require("../CloseButton");
 const Text_1 = require("../Text");
 const Select_1 = require("./Select");
 const Popover_1 = require("../Popover");
-const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideClick = false, optionsMessage, isCreatable, selectProps, className, style, }) => {
+const Label_1 = require("../Label");
+const Heading_1 = require("../Heading");
+const SelectPopover = ({ readView, cancelButton, onCancelEdit, heading, label, showLabel = false, preventOutsideClick = false, optionsMessage, helpTip, isCreatable, selectProps, className, style, popoverStyle, hideCloseButton = false, }) => {
     const containerElement = react_1.default.useRef(null);
     const selectWrapperElement = react_1.default.useRef(null);
     const readViewWrapperElement = react_1.default.useRef(null);
@@ -49,19 +51,19 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
     const selectStyles = {
         control: (provided) => ({
             ...provided,
-            width: `calc(100% - ${tokens_1.tokens.margin[6]})`,
-            margin: tokens_1.tokens.margin[3],
+            width: `calc(100% - ${tokens_1.tokens.spacing[6]})`,
+            margin: tokens_1.tokens.spacing[3],
         }),
         menu: (provided) => ({
             ...provided,
             boxShadow: "none !important",
             borderRadius: "0 !important",
             zIndex: "1 !important",
-            backgroundColor: tokens_1.tokens.colors.white,
+            backgroundColor: tokens_1.tokens.color.white,
             position: "relative",
-            marginTop: tokens_1.tokens.margin[3],
+            marginTop: tokens_1.tokens.spacing[3],
             marginBottom: 0,
-            borderTop: `1px solid ${tokens_1.tokens.colors.gray[300]}`,
+            borderTop: `1px solid ${tokens_1.tokens.color.gray[300]}`,
             maxHeight: "184px",
             overflowY: "auto",
         }),
@@ -71,6 +73,7 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
         MenuList: (props) => {
             const { children, innerRef, options } = props;
             return (react_1.default.createElement(Box_1.Box, { ref: innerRef },
+                options.length > 0 && helpTip && react_1.default.createElement(react_1.default.Fragment, null, helpTip),
                 react_1.default.createElement(Box_1.Box, null, children),
                 options.length > 0 && optionsMessage && (react_1.default.createElement(Text_1.Text, { className: "text-gray-600 text-icon leading-normal px-3 py-2" }, optionsMessage))));
         },
@@ -79,7 +82,6 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
     const sharedProps = {
         isCreatable,
         onBlur: () => { },
-        components,
         styles: selectStyles,
         tabSelectsValue: false,
         closeMenuOnSelect: false,
@@ -92,7 +94,7 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
         autoFocus: true,
         className: classnames_1.default("w-full"),
     };
-    const initialPlacement = "bottom";
+    const initialPlacement = "bottom-end";
     const [currentPlacement, setCurrentPlacement] = react_1.useState(initialPlacement);
     const popperModifiers = react_1.useMemo(() => [
         {
@@ -114,14 +116,19 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
             },
         },
     ], []);
+    const { components: componentsFromSelectProps, ...restSelectProps } = selectProps;
+    const mergedComponents = {
+        ...components,
+        ...componentsFromSelectProps,
+    };
     return (react_1.default.createElement(react_focus_lock_1.default, null,
-        react_1.default.createElement(Popover_1.Popover, { isVisible: true, className: classnames_1.default("rounded-tl-none", "rounded-tr-none", currentPlacement === "top" ? "shadow-up" : "shadow", "box-content", "border", "border-gray-300"), popperModifiers: popperModifiers, removePadding: true, placement: initialPlacement, referenceElement: react_1.default.createElement(PopoverMenu_1.PopoverMenu, { ref: containerElement, className: classnames_1.default("w-full absolute", "shadow", currentPlacement === "bottom"
+        react_1.default.createElement(Popover_1.Popover, { isVisible: true, className: classnames_1.default("rounded-tl-none", "rounded-tr-none", currentPlacement === "top" ? "shadow-up" : "shadow", "box-content", "border", "border-gray-300"), style: popoverStyle, popperModifiers: popperModifiers, removePadding: true, placement: initialPlacement, referenceElement: react_1.default.createElement(PopoverMenu_1.PopoverMenu, { ref: containerElement, className: classnames_1.default("w-full absolute", "shadow", currentPlacement === "bottom"
                     ? "rounded-bl-none rounded-br-none"
                     : "rounded-tl-none rounded-tr-none", className), style: style },
                 react_1.default.createElement(Flex_1.Flex, { className: "px-2 py-1 items-center w-full border-b border-gray-300", ref: readViewWrapperElement },
                     readView,
                     react_1.default.createElement(Stack_1.Stack, { spacing: 1, className: "ml-auto flex-shrink-0 self-start" },
-                        react_1.default.createElement(CloseButton_1.CloseButton, { className: "text-iconSm", onClick: () => {
+                        !hideCloseButton && (react_1.default.createElement(CloseButton_1.CloseButton, { className: "text-iconSm", onClick: () => {
                                 if (selectProps.onChange) {
                                     if (selectProps.isMulti) {
                                         selectProps.onChange([], { action: "clear" });
@@ -130,8 +137,13 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
                                         selectProps.onChange({ label: "", value: "" }, { action: "clear" });
                                     }
                                 }
-                            } }),
+                            } })),
                         cancelButton))) },
-            react_1.default.createElement(Box_1.Box, { ref: selectWrapperElement }, isCreatable ? (react_1.default.createElement(Select_1.Select.Creatable, Object.assign({}, selectProps, sharedProps))) : (react_1.default.createElement(Select_1.Select, Object.assign({}, selectProps, sharedProps)))))));
+            react_1.default.createElement(Box_1.Box, { ref: selectWrapperElement },
+                heading && (react_1.default.createElement(Flex_1.Flex, { className: "items-center justify-between py-3 px-3 h-12 border-b" },
+                    react_1.default.createElement(Heading_1.Heading.H4, null, heading),
+                    react_1.default.createElement(CloseButton_1.CloseButton, { onClick: onCancelEdit }))),
+                showLabel && label && (react_1.default.createElement(Label_1.Label, { className: "-mb-1 px-3 pt-3" }, label)),
+                isCreatable ? (react_1.default.createElement(Select_1.Select.Creatable, Object.assign({ components: mergedComponents }, restSelectProps, sharedProps))) : (react_1.default.createElement(Select_1.Select, Object.assign({ components: mergedComponents }, restSelectProps, sharedProps)))))));
 };
 exports.SelectPopover = SelectPopover;

package/public/components/Select/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Select";
 export * from "./SelectPopover";
+export { components as ReactSelectComponents } from "react-select";
+export type { MenuProps as ReactSelectMenuProps, GroupProps as ReactSelectGroupProps, InputProps as ReactSelectInputProps, OptionProps as ReactSelectOptionProps, ControlProps as ReactSelectControlProps, IndicatorProps as ReactSelectIndicatorProps, MultiValueProps as ReactSelectMultiValueProps, PlaceholderProps as ReactSelectPlaceholderProps, SingleValueProps as ReactSelectSingleValueProps, ValueContainerProps as ReactSelectValueContainerProps, MenuListComponentProps as ReactSelectMenuListComponentProps, } from "react-select";

package/public/components/Select/index.js

@@ -10,5 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectComponents = void 0;
 __exportStar(require("./Select"), exports);
 __exportStar(require("./SelectPopover"), exports);
+var react_select_1 = require("react-select");
+Object.defineProperty(exports, "ReactSelectComponents", { enumerable: true, get: function () { return react_select_1.components; } });

package/public/components/Select/theme.js

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adsTheme = void 0;
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const toNumber_1 = require("../../utilities/toNumber");
 exports.adsTheme = {
-    borderRadius: toNumber_1.toNumber(tokens_1.borderRadius.DEFAULT),
+    borderRadius: toNumber_1.toNumber(tokens_1.tokens.borderRadius.DEFAULT),
     colors: {
-        danger: tokens_1.colors.red["400"],
-        dangerLight: tokens_1.colors.red["300"],
-        neutral0: tokens_1.colors.white,
-        neutral5: tokens_1.colors.gray["100"],
-        neutral10: tokens_1.colors.gray["100"],
-        neutral20: tokens_1.colors.gray["200"],
-        neutral30: tokens_1.colors.gray["400"],
-        neutral40: tokens_1.colors.gray["500"],
-        neutral50: tokens_1.colors.gray["600"],
-        neutral60: tokens_1.colors.gray["700"],
-        neutral70: tokens_1.colors.gray["800"],
-        neutral80: tokens_1.colors.gray["900"],
-        neutral90: tokens_1.colors.gray["900"],
-        primary: tokens_1.colors.blue["500"],
-        primary25: tokens_1.colors.gray["300"],
-        primary50: tokens_1.colors.gray["300"],
-        primary75: tokens_1.colors.blue["400"],
+        danger: tokens_1.tokens.color.red["400"],
+        dangerLight: tokens_1.tokens.color.red["300"],
+        neutral0: tokens_1.tokens.color.white,
+        neutral5: tokens_1.tokens.color.gray["100"],
+        neutral10: tokens_1.tokens.color.gray["100"],
+        neutral20: tokens_1.tokens.color.gray["200"],
+        neutral30: tokens_1.tokens.color.gray["400"],
+        neutral40: tokens_1.tokens.color.gray["500"],
+        neutral50: tokens_1.tokens.color.gray["600"],
+        neutral60: tokens_1.tokens.color.gray["700"],
+        neutral70: tokens_1.tokens.color.gray["800"],
+        neutral80: tokens_1.tokens.color.gray["900"],
+        neutral90: tokens_1.tokens.color.gray["900"],
+        primary: tokens_1.tokens.color.blue["500"],
+        primary25: tokens_1.tokens.color.gray["300"],
+        primary50: tokens_1.tokens.color.gray["300"],
+        primary75: tokens_1.tokens.color.blue["400"],
     },
     spacing: {
-        baseUnit: toNumber_1.toNumber(tokens_1.margin["1"]),
-        controlHeight: toNumber_1.toNumber(tokens_1.height["10"]),
-        menuGutter: toNumber_1.toNumber(tokens_1.margin["1"]),
+        baseUnit: toNumber_1.toNumber(tokens_1.tokens.spacing["1"]),
+        controlHeight: toNumber_1.toNumber(tokens_1.tokens.height["10"]),
+        menuGutter: toNumber_1.toNumber(tokens_1.tokens.spacing["1"]),
     },
 };