@artsy/palette 20.0.3 → 20.1.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v20.1.0 (Wed Jun 08 2022)
+
+#### 🚀  Enhancement
+
+- feat: add ability to open Dropdown by click [#1180](https://github.com/artsy/palette/pull/1180) ([@dimatretyak](https://github.com/dimatretyak))
+
+#### 🐛  Bug Fix
+
+- chore: specify `openDropdownByClick` in deps ([@dimatretyak](https://github.com/dimatretyak))
+- feat: add click mode for Dropdown ([@dimatretyak](https://github.com/dimatretyak))
+
+#### Authors: 1
+
+- Dima Tretyak (Dzmitry Tratsiak) ([@dimatretyak](https://github.com/dimatretyak))
+
+---
+
 # v20.0.3 (Mon Jun 06 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/Dropdown/Dropdown.d.ts

@@ -24,10 +24,11 @@ export interface DropdownProps extends BoxProps {
     offset?: number;
     /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */
     keepInDOM?: boolean;
+    openDropdownByClick?: boolean;
     children: (dropdownActions: DropdownActions) => JSX.Element;
 }
 /**
  * A `Dropdown` is a small modal-type element which is anchored, and can be
- * positioned relative to, another element and designed to be transitioned in on hover.
+ * positioned relative to, another element and designed to be transitioned in on hover or on click.
  */
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/elements/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ var _useUpdateEffect = require("../../utils/useUpdateEffect");
 
 var _Box = require("../Box");
 
-var _excluded = ["placement", "visible", "keepInDOM", "children", "offset", "dropdown"];
+var _excluded = ["placement", "visible", "keepInDOM", "children", "offset", "dropdown", "openDropdownByClick"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -55,7 +55,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 /**
  * A `Dropdown` is a small modal-type element which is anchored, and can be
- * positioned relative to, another element and designed to be transitioned in on hover.
+ * positioned relative to, another element and designed to be transitioned in on hover or on click.
  */
 var Dropdown = function Dropdown(_ref) {
   var _ref$placement = _ref.placement,
@@ -67,6 +67,7 @@ var Dropdown = function Dropdown(_ref) {
       _ref$offset = _ref.offset,
       offset = _ref$offset === void 0 ? 10 : _ref$offset,
       dropdown = _ref.dropdown,
+      openDropdownByClick = _ref.openDropdownByClick,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -105,6 +106,14 @@ var Dropdown = function Dropdown(_ref) {
     }, 150);
   };
 
+  var onToggleVisibility = function onToggleVisibility() {
+    if (visible) {
+      return onHide();
+    }
+
+    onVisible();
+  };
+
   var _usePosition = (0, _utils.usePosition)({
     position: placement,
     offset: 0,
@@ -136,13 +145,23 @@ var Dropdown = function Dropdown(_ref) {
       }
     };
 
+    var handleClick = function handleClick(event) {
+      if (!panelRef.current || !openDropdownByClick) return;
+
+      if (panelRef.current.contains(event.target)) {
+        onHide();
+      }
+    };
+
     document.addEventListener("keydown", handleKeyDown);
     document.addEventListener("keyup", handleKeyUp);
+    document.addEventListener("click", handleClick);
     return function () {
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("keyup", handleKeyUp);
+      document.removeEventListener("click", handleClick);
     };
-  }, [panelRef]);
+  }, [panelRef, openDropdownByClick]);
   var activeRef = (0, _react.useRef)(false);
 
   var handleMouseEnter = function handleMouseEnter() {
@@ -212,13 +231,17 @@ var Dropdown = function Dropdown(_ref) {
         return _defineProperty({}, isFlipped ? "pr" : "pl", offset);
     }
   }, [placement, isFlipped, offset]);
-  var anchorProps = {
+
+  var anchorProps = _objectSpread({
     "aria-expanded": visible,
-    "aria-haspopup": true,
+    "aria-haspopup": true
+  }, openDropdownByClick ? {
+    onClick: onToggleVisibility
+  } : {
     onMouseEnter: onVisible,
     onMouseLeave: onHide,
     onClick: onVisible
-  };
+  });
 
   var _usePortal = (0, _usePortal2.usePortal)(),
       createPortal = _usePortal.createPortal;
@@ -240,12 +263,13 @@ var Dropdown = function Dropdown(_ref) {
     ref: panelRef,
     zIndex: 1,
     display: "inline-block",
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
     placement: placement,
     style: _objectSpread({}, keepInDOM ? {
       visibility: visible ? "visible" : "hidden"
     } : {})
+  }, openDropdownByClick ? {} : {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, padding, rest), /*#__PURE__*/_react.default.createElement(Panel, {
     bg: "white100",
     border: "1px solid",

package/dist/elements/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Dropdown/Dropdown.tsx"],"names":["Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","rest","setVisible","panelRef","current","focus","anchorRef","timeoutRef","onVisible","clearTimeout","setTimeout","onHide","activeRef","position","active","tooltipRef","isFlipped","state","ref","onClickOutside","when","type","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","transition","setTransition","translation","padding","anchorProps","onMouseEnter","onMouseLeave","onClick","createPortal","visibility","opacity","transform","Container","Box","Panel","FLAT_SHADOW"],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport {\n  Position,\n  useClickOutside,\n  useFocusLock,\n  usePosition,\n} from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\nexport interface DropdownProps extends BoxProps {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  children: (dropdownActions: DropdownActions) => JSX.Element\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover.\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n  placement = \"top\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between dropdown and anchor\n  useUpdateEffect(() => {\n    if (visible && panelRef.current) {\n      panelRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const onVisible = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      setVisible(true)\n    }, 50)\n  }\n\n  const onHide = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      if (activeRef.current) return\n      setVisible(false)\n    }, 150)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: panelRef,\n    onClickOutside: onHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n    }\n  }, [panelRef])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    setTimeout(() => {\n      setTransition(visible)\n    }, 0)\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    onMouseEnter: onVisible,\n    onMouseLeave: onHide,\n    onClick: onVisible,\n  }\n\n  const { createPortal } = usePortal()\n\n  useFocusLock({ ref: panelRef, active: visible })\n\n  return (\n    <>\n      {children({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={1}\n            display=\"inline-block\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              bg=\"white100\"\n              border=\"1px solid\"\n              borderColor=\"black10\"\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              {typeof dropdown === \"function\"\n                ? dropdown({ onVisible, onHide, setVisible, visible })\n                : dropdown}\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)`\n  transition: opacity 250ms ease-out, transform 250ms ease-out;\n  box-shadow: ${FLAT_SHADOW};\n`\n"],"file":"Dropdown.js"}
+{"version":3,"sources":["../../../src/elements/Dropdown/Dropdown.tsx"],"names":["Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","openDropdownByClick","rest","setVisible","panelRef","current","focus","anchorRef","timeoutRef","onVisible","clearTimeout","setTimeout","onHide","activeRef","onToggleVisibility","position","active","tooltipRef","isFlipped","state","ref","onClickOutside","when","type","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","transition","setTransition","translation","padding","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","visibility","opacity","transform","Container","Box","Panel","FLAT_SHADOW"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA;AACA;AACA;AACA;AACO,IAAMA,QAAiC,GAAG,SAApCA,QAAoC,OAS3C;AAAA,4BARJC,SAQI;AAAA,MARJA,SAQI,+BARQ,KAQR;AAAA,0BAPJC,OAOI;AAAA,MAPKC,QAOL,6BAPgB,KAOhB;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,EAIL;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,mBAEI,QAFJA,mBAEI;AAAA,MADDC,IACC;;AACJ,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOP,OAAP;AAAA,MAAgBQ,UAAhB,iBADI,CAGJ;;;AACA,wBAAU,YAAM;AACdA,IAAAA,UAAU,CAACP,QAAD,CAAV;AACD,GAFD,EAEG,CAACA,QAAD,CAFH,EAJI,CAQJ;;AACA,wCAAgB,YAAM;AACpB,QAAID,OAAO,IAAIS,QAAQ,CAACC,OAAxB,EAAiC;AAC/BD,MAAAA,QAAQ,CAACC,OAAT,CAAiBC,KAAjB;AACA;AACD;;AAED,QAAI,CAACC,SAAS,CAACF,OAAf,EAAwB;AACxBE,IAAAA,SAAS,CAACF,OAAV,CAAkBC,KAAlB;AACD,GARD,EAQG,CAACX,OAAD,CARH;AAUA,MAAMa,UAAU,GAAG,mBAA6C,IAA7C,CAAnB;;AAEA,MAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtBD,IAAAA,UAAU,CAACH,OAAX,IAAsBK,YAAY,CAACF,UAAU,CAACH,OAAZ,CAAlC;AACAG,IAAAA,UAAU,CAACH,OAAX,GAAqBM,UAAU,CAAC,YAAM;AACpCR,MAAAA,UAAU,CAAC,IAAD,CAAV;AACD,KAF8B,EAE5B,EAF4B,CAA/B;AAGD,GALD;;AAOA,MAAMS,MAAM,GAAG,SAATA,MAAS,GAAM;AACnBJ,IAAAA,UAAU,CAACH,OAAX,IAAsBK,YAAY,CAACF,UAAU,CAACH,OAAZ,CAAlC;AACAG,IAAAA,UAAU,CAACH,OAAX,GAAqBM,UAAU,CAAC,YAAM;AACpC,UAAIE,SAAS,CAACR,OAAd,EAAuB;AACvBF,MAAAA,UAAU,CAAC,KAAD,CAAV;AACD,KAH8B,EAG5B,GAH4B,CAA/B;AAID,GAND;;AAQA,MAAMW,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,QAAInB,OAAJ,EAAa;AACX,aAAOiB,MAAM,EAAb;AACD;;AAEDH,IAAAA,SAAS;AACV,GAND;;AAQA,qBAII,wBAAY;AACdM,IAAAA,QAAQ,EAAErB,SADI;AAEdK,IAAAA,MAAM,EAAE,CAFM;AAGdiB,IAAAA,MAAM,EAAErB;AAHM,GAAZ,CAJJ;AAAA,MACEY,SADF,gBACEA,SADF;AAAA,MAEcH,QAFd,gBAEEa,UAFF;AAAA,MAGWC,SAHX,gBAGEC,KAHF,CAGWD,SAHX;;AAUA,8BAAgB;AACdE,IAAAA,GAAG,EAAEhB,QADS;AAEdiB,IAAAA,cAAc,EAAET,MAFF;AAGdU,IAAAA,IAAI,EAAE3B,OAHQ;AAId4B,IAAAA,IAAI,EAAE;AAJQ,GAAhB;AAOA,wBAAU,YAAM;AACd,QAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA0B;AAC9C,UAAIA,KAAK,CAACC,GAAN,KAAc,QAAlB,EAA4B;AAC1Bd,QAAAA,MAAM;AACP;AACF,KAJD,CADc,CAOd;;;AACA,QAAMe,WAAW,GAAG,SAAdA,WAAc,CAACF,KAAD,EAA0B;AAC5C,UAAI,CAACrB,QAAQ,CAACC,OAAd,EAAuB;;AAEvB,UACEoB,KAAK,CAACC,GAAN,KAAc,KAAd,IACA,EACEtB,QAAQ,CAACC,OAAT,KAAqBuB,QAAQ,CAACC,aAA9B,IACAzB,QAAQ,CAACC,OAAT,CAAiByB,QAAjB,CAA0BF,QAAQ,CAACC,aAAnC,CAFF,CAFF,EAME;AACAjB,QAAAA,MAAM;AACP;AACF,KAZD;;AAcA,QAAMmB,WAAW,GAAG,SAAdA,WAAc,CAACN,KAAD,EAAuB;AACzC,UAAI,CAACrB,QAAQ,CAACC,OAAV,IAAqB,CAACJ,mBAA1B,EAA+C;;AAE/C,UAAIG,QAAQ,CAACC,OAAT,CAAiByB,QAAjB,CAA0BL,KAAK,CAACO,MAAhC,CAAJ,EAAwD;AACtDpB,QAAAA,MAAM;AACP;AACF,KAND;;AAQAgB,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,SAA1B,EAAqCT,aAArC;AACAI,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,OAA1B,EAAmCN,WAAnC;AACAC,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,OAA1B,EAAmCF,WAAnC;AAEA,WAAO,YAAM;AACXH,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,SAA7B,EAAwCV,aAAxC;AACAI,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,OAA7B,EAAsCP,WAAtC;AACAC,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,OAA7B,EAAsCH,WAAtC;AACD,KAJD;AAKD,GAvCD,EAuCG,CAAC3B,QAAD,EAAWH,mBAAX,CAvCH;AAyCA,MAAMY,SAAS,GAAG,mBAAO,KAAP,CAAlB;;AAEA,MAAMsB,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7BtB,IAAAA,SAAS,CAACR,OAAV,GAAoB,IAApB;AACD,GAFD;;AAIA,MAAM+B,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7BvB,IAAAA,SAAS,CAACR,OAAV,GAAoB,KAApB;AACAO,IAAAA,MAAM;AACP,GAHD;;AAKA,mBAAoC,qBAAS,KAAT,CAApC;AAAA;AAAA,MAAOyB,UAAP;AAAA,MAAmBC,aAAnB,iBAjHI,CAmHJ;;;AACA,wBAAU,YAAM;AACd3B,IAAAA,UAAU,CAAC,YAAM;AACf2B,MAAAA,aAAa,CAAC3C,OAAD,CAAb;AACD,KAFS,EAEP,CAFO,CAAV;AAGD,GAJD,EAIG,CAACA,OAAD,CAJH;AAMA,MAAM4C,WAAW,GAAG,oBAAQ,YAAM;AAChC,YAAQ7C,SAAR;AACE,WAAK,WAAL;AACA,WAAK,KAAL;AACA,WAAK,SAAL;AACE;;AACF,WAAK,cAAL;AACA,WAAK,QAAL;AACA,WAAK,YAAL;AACE;;AACF,WAAK,YAAL;AACA,WAAK,MAAL;AACA,WAAK,UAAL;AACE;;AACF,WAAK,aAAL;AACA,WAAK,OAAL;AACA,WAAK,WAAL;AACE;AAhBJ;AAkBD,GAnBmB,EAmBjB,CAACA,SAAD,CAnBiB,CAApB,CA1HI,CA+IJ;;AACA,MAAM8C,OAAO,GAAG,oBAAQ,YAAM;AAC5B,YAAQ9C,SAAR;AACE,WAAK,WAAL;AACA,WAAK,KAAL;AACA,WAAK,SAAL;AACE,mCAAUwB,SAAS,GAAG,IAAH,GAAU,IAA7B,EAAoCnB,MAApC;;AACF,WAAK,cAAL;AACA,WAAK,QAAL;AACA,WAAK,YAAL;AACE,mCAAUmB,SAAS,GAAG,IAAH,GAAU,IAA7B,EAAoCnB,MAApC;;AACF,WAAK,YAAL;AACA,WAAK,MAAL;AACA,WAAK,UAAL;AACE,mCAAUmB,SAAS,GAAG,IAAH,GAAU,IAA7B,EAAoCnB,MAApC;;AACF,WAAK,aAAL;AACA,WAAK,OAAL;AACA,WAAK,WAAL;AACE,mCAAUmB,SAAS,GAAG,IAAH,GAAU,IAA7B,EAAoCnB,MAApC;AAhBJ;AAkBD,GAnBe,EAmBb,CAACL,SAAD,EAAYwB,SAAZ,EAAuBnB,MAAvB,CAnBa,CAAhB;;AAqBA,MAAM0C,WAA8C;AAClD,qBAAiB9C,OADiC;AAElD,qBAAiB;AAFiC,KAG9CM,mBAAmB,GACnB;AACEyC,IAAAA,OAAO,EAAE5B;AADX,GADmB,GAInB;AACE6B,IAAAA,YAAY,EAAElC,SADhB;AAEEmC,IAAAA,YAAY,EAAEhC,MAFhB;AAGE8B,IAAAA,OAAO,EAAEjC;AAHX,GAP8C,CAApD;;AAcA,mBAAyB,4BAAzB;AAAA,MAAQoC,YAAR,cAAQA,YAAR;;AAEA,2BAAa;AAAEzB,IAAAA,GAAG,EAAEhB,QAAP;AAAiBY,IAAAA,MAAM,EAAErB;AAAzB,GAAb;AAEA,sBACE,4DACGG,QAAQ,CAAC;AACRS,IAAAA,SAAS,EAAEA,SADH;AAERkC,IAAAA,WAAW,EAAXA,WAFQ;AAGRhC,IAAAA,SAAS,EAATA,SAHQ;AAIRG,IAAAA,MAAM,EAANA,MAJQ;AAKRT,IAAAA,UAAU,EAAVA,UALQ;AAMRR,IAAAA,OAAO,EAAPA;AANQ,GAAD,CADX,EAUG,CAACA,OAAO,IAAIE,SAAZ,KACCgD,YAAY,eACV,6BAAC,SAAD;AACE,kBAAW,uBADb;AAEE,IAAA,QAAQ,EAAE,CAFZ;AAGE,IAAA,GAAG,EAAEzC,QAHP;AAIE,IAAA,MAAM,EAAE,CAJV;AAKE,IAAA,OAAO,EAAC,cALV;AAME,IAAA,SAAS,EAAEV,SANb;AAOE,IAAA,KAAK,oBACCG,SAAS,GACT;AAAEiD,MAAAA,UAAU,EAAEnD,OAAO,GAAG,SAAH,GAAe;AAApC,KADS,GAET,EAHD;AAPP,KAYOM,mBAAmB,GACpB,EADoB,GAEpB;AACE0C,IAAAA,YAAY,EAAER,gBADhB;AAEES,IAAAA,YAAY,EAAER;AAFhB,GAdN,EAkBMI,OAlBN,EAmBMtC,IAnBN,gBAqBE,6BAAC,KAAD;AACE,IAAA,EAAE,EAAC,UADL;AAEE,IAAA,MAAM,EAAC,WAFT;AAGE,IAAA,WAAW,EAAC,SAHd;AAIE,IAAA,KAAK,EACHmC,UAAU,GACN;AACA;AAAEU,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB,KAFM,GAGN;AACA;AACED,MAAAA,OAAO,EAAE,CADX;AAEEC,MAAAA,SAAS,EAAET;AAFb;AATR,KAeG,OAAOvC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAES,IAAAA,SAAS,EAATA,SAAF;AAAaG,IAAAA,MAAM,EAANA,MAAb;AAAqBT,IAAAA,UAAU,EAAVA,UAArB;AAAiCR,IAAAA,OAAO,EAAPA;AAAjC,GAAD,CADX,GAEGK,QAjBN,CArBF,CADU,CAXhB,CADF;AAyDD,CAzPM;;;AA2PP,IAAMiD,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,iDAAf;AAMA,IAAMC,KAAK,GAAG,+BAAOD,QAAP,CAAH;AAAA;AAAA;AAAA,oFAEKE,oBAFL,CAAX","sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport {\n  Position,\n  useClickOutside,\n  useFocusLock,\n  usePosition,\n} from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\nexport interface DropdownProps extends BoxProps {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: (dropdownActions: DropdownActions) => JSX.Element\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n  placement = \"top\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  openDropdownByClick,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between dropdown and anchor\n  useUpdateEffect(() => {\n    if (visible && panelRef.current) {\n      panelRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const onVisible = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      setVisible(true)\n    }, 50)\n  }\n\n  const onHide = () => {\n    timeoutRef.current && clearTimeout(timeoutRef.current)\n    timeoutRef.current = setTimeout(() => {\n      if (activeRef.current) return\n      setVisible(false)\n    }, 150)\n  }\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: panelRef,\n    onClickOutside: onHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n\n      if (panelRef.current.contains(event.target as Element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    setTimeout(() => {\n      setTransition(visible)\n    }, 0)\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: onVisible,\n          onMouseLeave: onHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  useFocusLock({ ref: panelRef, active: visible })\n\n  return (\n    <>\n      {children({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={1}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              bg=\"white100\"\n              border=\"1px solid\"\n              borderColor=\"black10\"\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              {typeof dropdown === \"function\"\n                ? dropdown({ onVisible, onHide, setVisible, visible })\n                : dropdown}\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)`\n  transition: opacity 250ms ease-out, transform 250ms ease-out;\n  box-shadow: ${FLAT_SHADOW};\n`\n"],"file":"Dropdown.js"}

package/dist/elements/Dropdown/Dropdown.story.d.ts

@@ -24,3 +24,4 @@ export declare const KeepInDOM: {
 };
 export declare const ChangeDimensions: () => JSX.Element;
 export declare const FocusOrder: () => JSX.Element;
+export declare const OpenDropdownByClick: () => JSX.Element;

package/dist/elements/Dropdown/Dropdown.story.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.KeepInDOM = exports.FocusOrder = exports.Default = exports.ChangeDimensions = void 0;
+exports.default = exports.OpenDropdownByClick = exports.KeepInDOM = exports.FocusOrder = exports.Default = exports.ChangeDimensions = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -208,4 +208,42 @@ var FocusOrder = function FocusOrder() {
 
 exports.FocusOrder = FocusOrder;
 FocusOrder.displayName = "FocusOrder";
+
+var OpenDropdownByClick = function OpenDropdownByClick() {
+  var dropdown = /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm-display"
+  }, /*#__PURE__*/_react.default.createElement(_.Clickable, {
+    display: "block",
+    width: "100%",
+    py: 1,
+    px: 2
+  }, "First"), /*#__PURE__*/_react.default.createElement(_.Clickable, {
+    display: "block",
+    width: "100%",
+    py: 1,
+    px: 2
+  }, "Second"), /*#__PURE__*/_react.default.createElement(_.Clickable, {
+    display: "block",
+    width: "100%",
+    py: 1,
+    px: 2
+  }, "Third"));
+
+  return /*#__PURE__*/_react.default.createElement(_.Flex, null, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
+    dropdown: dropdown,
+    openDropdownByClick: true
+  }, function (_ref6) {
+    var anchorRef = _ref6.anchorRef,
+        anchorProps = _ref6.anchorProps;
+    return /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({
+      ref: anchorRef,
+      variant: "secondaryOutline",
+      size: "small",
+      mr: 1
+    }, anchorProps), "Click to display dropdown");
+  }));
+};
+
+exports.OpenDropdownByClick = OpenDropdownByClick;
+OpenDropdownByClick.displayName = "OpenDropdownByClick";
 //# sourceMappingURL=Dropdown.story.js.map

package/dist/elements/Dropdown/Dropdown.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Dropdown/Dropdown.story.tsx"],"names":["title","Default","Object","keys","POSITION","map","placement","anchorRef","anchorProps","story","parameters","chromatic","disable","KeepInDOM","ChangeDimensions","height","setHeight","setInterval","Math","floor","random","FocusOrder","dropdown"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable, Flex } from \"..\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { Dropdown, DropdownProps } from \"./Dropdown\"\n\nexport default {\n  title: \"Components/Dropdown\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<DropdownProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      <Dropdown\n        placement=\"bottom\"\n        visible\n        dropdown={\n          <Box width={300} p={2}>\n            <Text\n              as=\"a\"\n              display=\"block\"\n              variant=\"sm\"\n              // @ts-expect-error  MIGRATE_STRICT_MODE\n              href=\"#\"\n            >\n              One\n            </Text>\n\n            <Text\n              as=\"a\"\n              display=\"block\"\n              variant=\"sm\"\n              // @ts-expect-error  MIGRATE_STRICT_MODE\n              href=\"#\"\n            >\n              Two\n            </Text>\n\n            <Text\n              as=\"a\"\n              display=\"block\"\n              variant=\"sm\"\n              // @ts-expect-error  MIGRATE_STRICT_MODE\n              href=\"#\"\n            >\n              Three\n            </Text>\n          </Box>\n        }\n      >\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryOutline\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                Hover to display dropdown\n              </Button>\n            </Box>\n          )\n        }}\n      </Dropdown>\n    </States>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const KeepInDOM = () => {\n  return (\n    <Dropdown\n      placement=\"bottom\"\n      keepInDOM\n      dropdown={\n        <Text p={2} variant=\"xs\">\n          Content remains in DOM\n        </Text>\n      }\n    >\n      {({ anchorRef, anchorProps }) => {\n        return (\n          <Button\n            ref={anchorRef}\n            variant=\"secondaryOutline\"\n            size=\"small\"\n            {...anchorProps}\n          >\n            Hover to display dropdown\n          </Button>\n        )\n      }}\n    </Dropdown>\n  )\n}\n\nKeepInDOM.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const ChangeDimensions = () => {\n  const [height, setHeight] = useState(10)\n\n  useEffect(() => {\n    setInterval(() => {\n      setHeight(Math.floor(Math.random() * 100))\n    }, 1000)\n  }, [])\n\n  return (\n    <Dropdown\n      placement=\"top\"\n      dropdown={<Box height={height} width={300} bg=\"rgba(0, 0, 0, 0.5)\" />}\n    >\n      {({ anchorRef, anchorProps }) => {\n        return (\n          <Button\n            ref={anchorRef}\n            variant=\"secondaryOutline\"\n            size=\"small\"\n            {...anchorProps}\n          >\n            Hover to display dropdown\n          </Button>\n        )\n      }}\n    </Dropdown>\n  )\n}\n\nexport const FocusOrder = () => {\n  const dropdown = (\n    <Text variant=\"sm-display\">\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        First\n      </Clickable>\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        Second\n      </Clickable>\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        Third\n      </Clickable>\n    </Text>\n  )\n\n  return (\n    <Flex>\n      <Dropdown dropdown={dropdown}>\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              mr={1}\n              {...anchorProps}\n            >\n              First Parent\n            </Button>\n          )\n        }}\n      </Dropdown>\n\n      <Dropdown dropdown={dropdown}>\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              {...anchorProps}\n            >\n              Second Parent\n            </Button>\n          )\n        }}\n      </Dropdown>\n    </Flex>\n  )\n}\n"],"file":"Dropdown.story.js"}
+{"version":3,"sources":["../../../src/elements/Dropdown/Dropdown.story.tsx"],"names":["title","Default","Object","keys","POSITION","map","placement","anchorRef","anchorProps","story","parameters","chromatic","disable","KeepInDOM","ChangeDimensions","height","setHeight","setInterval","Math","floor","random","FocusOrder","dropdown","OpenDropdownByClick"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable, Flex } from \"..\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { Dropdown, DropdownProps } from \"./Dropdown\"\n\nexport default {\n  title: \"Components/Dropdown\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<DropdownProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      <Dropdown\n        placement=\"bottom\"\n        visible\n        dropdown={\n          <Box width={300} p={2}>\n            <Text\n              as=\"a\"\n              display=\"block\"\n              variant=\"sm\"\n              // @ts-expect-error  MIGRATE_STRICT_MODE\n              href=\"#\"\n            >\n              One\n            </Text>\n\n            <Text\n              as=\"a\"\n              display=\"block\"\n              variant=\"sm\"\n              // @ts-expect-error  MIGRATE_STRICT_MODE\n              href=\"#\"\n            >\n              Two\n            </Text>\n\n            <Text\n              as=\"a\"\n              display=\"block\"\n              variant=\"sm\"\n              // @ts-expect-error  MIGRATE_STRICT_MODE\n              href=\"#\"\n            >\n              Three\n            </Text>\n          </Box>\n        }\n      >\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryOutline\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                Hover to display dropdown\n              </Button>\n            </Box>\n          )\n        }}\n      </Dropdown>\n    </States>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const KeepInDOM = () => {\n  return (\n    <Dropdown\n      placement=\"bottom\"\n      keepInDOM\n      dropdown={\n        <Text p={2} variant=\"xs\">\n          Content remains in DOM\n        </Text>\n      }\n    >\n      {({ anchorRef, anchorProps }) => {\n        return (\n          <Button\n            ref={anchorRef}\n            variant=\"secondaryOutline\"\n            size=\"small\"\n            {...anchorProps}\n          >\n            Hover to display dropdown\n          </Button>\n        )\n      }}\n    </Dropdown>\n  )\n}\n\nKeepInDOM.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const ChangeDimensions = () => {\n  const [height, setHeight] = useState(10)\n\n  useEffect(() => {\n    setInterval(() => {\n      setHeight(Math.floor(Math.random() * 100))\n    }, 1000)\n  }, [])\n\n  return (\n    <Dropdown\n      placement=\"top\"\n      dropdown={<Box height={height} width={300} bg=\"rgba(0, 0, 0, 0.5)\" />}\n    >\n      {({ anchorRef, anchorProps }) => {\n        return (\n          <Button\n            ref={anchorRef}\n            variant=\"secondaryOutline\"\n            size=\"small\"\n            {...anchorProps}\n          >\n            Hover to display dropdown\n          </Button>\n        )\n      }}\n    </Dropdown>\n  )\n}\n\nexport const FocusOrder = () => {\n  const dropdown = (\n    <Text variant=\"sm-display\">\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        First\n      </Clickable>\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        Second\n      </Clickable>\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        Third\n      </Clickable>\n    </Text>\n  )\n\n  return (\n    <Flex>\n      <Dropdown dropdown={dropdown}>\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              mr={1}\n              {...anchorProps}\n            >\n              First Parent\n            </Button>\n          )\n        }}\n      </Dropdown>\n\n      <Dropdown dropdown={dropdown}>\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              {...anchorProps}\n            >\n              Second Parent\n            </Button>\n          )\n        }}\n      </Dropdown>\n    </Flex>\n  )\n}\n\nexport const OpenDropdownByClick = () => {\n  const dropdown = (\n    <Text variant=\"sm-display\">\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        First\n      </Clickable>\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        Second\n      </Clickable>\n      <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n        Third\n      </Clickable>\n    </Text>\n  )\n\n  return (\n    <Flex>\n      <Dropdown dropdown={dropdown} openDropdownByClick>\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              mr={1}\n              {...anchorProps}\n            >\n              Click to display dropdown\n            </Button>\n          )\n        }}\n      </Dropdown>\n    </Flex>\n  )\n}\n"],"file":"Dropdown.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "20.0.3",
+  "version": "20.1.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "a3b1522ca74ee4e9502d0eb53c48360e1cb93620"
+  "gitHead": "03da373e8eac3c7e9c9246d1f71163d688b3aff8"
 }