@conveyorhq/arrow-ds 1.42.0 → 1.43.0

package/package.json

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

package/public/components/Modal/Modal.js

@@ -94,8 +94,12 @@ const Modal = (props) => {
     const { title, secondaryTitle, description, children, isOpen, onClose, autoFocus = false, disableOutsideClick = true, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, noHeader = false, className, ...rest } = props;
     const modalElement = react_1.useRef(null);
     const showHeader = title || secondaryTitle || !hideCloseButton;
+    const [esc, setEsc] = react_1.useState(disableEscClose);
+    react_1.useEffect(() => {
+        setEsc(disableEscClose);
+    }, [disableEscClose]);
     hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
-        if (!disableEscClose && onClose) {
+        if (!esc && onClose) {
             onClose();
         }
     });

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

@@ -20,7 +20,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

@@ -126,15 +126,15 @@ const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id:
         return (react_1.default.createElement(async_1.default, Object.assign({ 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({ 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)));
 };
 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/src/components/Modal/Modal.story.mdx

@@ -898,3 +898,60 @@ Hide the header to create a custom layout.
     }}
   </Story>
 </Preview>
+
+### Dynamically controlling disableEscClose prop
+
+There are times when you might want to use <kbd>escape</kbd> to control a
+component inside of a modal. Previously, you would need to set `disableEscClose`
+to false in order to preserve <kbd>escape</kbd> for the component instead of
+closing the modal.
+
+Here’s an example showing a Select component inside of a modal and how you can
+control both the Select and Modal with <kbd>escape</kbd>.
+
+To do so, we need to track the open state of the select. Then we can pass that
+state variable to the `disableEscClose` prop.
+
+When the select menu is open, the first <kbd>escape</kbd> keypress closes the
+select menu. The second <kbd>escape</kbd> keypress closes the modal.
+
+<Preview>
+  <Story name="Dynamically controlling disableEscClose prop">
+    {() => {
+      const { isOpen, onOpen, onClose } = useDisclosure();
+      const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+      return (
+        <Fragment>
+          <Button onClick={onOpen}>Show Modal</Button>
+          <Modal
+            title="Modal component"
+            isOpen={isOpen}
+            onClose={onClose}
+            disableEscClose={isSelectOpen}
+          >
+            <Modal.Body>
+              <Box style={{ height: "400px" }}>
+                <Select
+                  autoFocus
+                  placeholder="Favorite ice cream?"
+                  options={[
+                    { value: "chocolate", label: "Chocolate" },
+                    { value: "strawberry", label: "Strawberry" },
+                    { value: "vanilla", label: "Vanilla" },
+                  ]}
+                  onMenuOpen={() => {
+                    setIsSelectOpen(true);
+                  }}
+                  onMenuClose={() => {
+                    setIsSelectOpen(false);
+                  }}
+                  menuInPortal
+                />
+              </Box>
+            </Modal.Body>
+          </Modal>
+        </Fragment>
+      );
+    }}
+  </Story>
+</Preview>

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
 import { RemoveScroll } from "react-remove-scroll";
@@ -266,8 +266,14 @@ export const Modal = (props: ModalProps) => {
   const modalElement = useRef<HTMLDivElement>(null);
   const showHeader = title || secondaryTitle || !hideCloseButton;
 
+  const [esc, setEsc] = useState(disableEscClose);
+
+  useEffect(() => {
+    setEsc(disableEscClose);
+  }, [disableEscClose]);
+
   useKeyPress(KEY_CODE.ESC, () => {
-    if (!disableEscClose && onClose) {
+    if (!esc && onClose) {
       onClose();
     }
   });

package/src/components/Select/Select.tsx

@@ -258,7 +258,6 @@ const SelectBase = ({
         id={id}
         {...rest}
         {...hardcodedProps}
-        createOptionPosition="first"
       />
     );
   }
@@ -277,8 +276,17 @@ const SelectAsync = (props: SelectAsyncProps) => {
   return <SelectBase {...props} type="async" />;
 };
 
-const SelectCreatable = (props: SelectCreatableProps) => {
-  return <SelectBase {...props} type="creatable" />;
+const SelectCreatable = ({
+  createOptionPosition = "first",
+  ...rest
+}: SelectCreatableProps) => {
+  return (
+    <SelectBase
+      createOptionPosition={createOptionPosition}
+      {...rest}
+      type="creatable"
+    />
+  );
 };
 
 const Select = (props: SelectProps) => {