@conveyorhq/arrow-ds 1.59.0 → 1.60.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.59.0",
+  "version": "1.60.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

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

@@ -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);
@@ -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/css/styles.css

@@ -5732,6 +5732,13 @@ override built-in Image component classes */
   color: rgb(134 163 181 / var(--tw-text-opacity));
 }
 
+.ads-Select .ads-Select__option--is-selected {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(244 247 249 / var(--tw-bg-opacity)) !important;
+
+  color: inherit;
+}
+
 .ads-Select-newOption {
   min-height: 32px;
   width: 100%;
@@ -8073,6 +8080,10 @@ override built-in Image component classes */
   margin-left: 16px;
 }
 
+.-mb-1 {
+  margin-bottom: -4px;
+}
+
 .ml-1 {
   margin-left: 4px;
 }
@@ -8688,6 +8699,10 @@ override built-in Image component classes */
   padding-left: 16px;
 }
 
+.pt-3 {
+  padding-top: 12px;
+}
+
 .pt-10 {
   padding-top: 40px;
 }