@artsy/palette 24.0.1 → 24.1.2

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+# v24.1.2 (Fri Sep 02 2022)
+
+#### 🐛  Bug Fix
+
+- refactor(Select): add useForwardRef [#1204](https://github.com/artsy/palette/pull/1204) ([@laurabeth](https://github.com/laurabeth))
+- cleanup ([@laurabeth](https://github.com/laurabeth))
+- refactor Select into ForwardRef component ([@laurabeth](https://github.com/laurabeth))
+
+#### Authors: 1
+
+- Laura Bhayani ([@laurabeth](https://github.com/laurabeth))
+
+---
+
+# v24.1.1 (Tue Aug 30 2022)
+
+#### 🐛  Bug Fix
+
+- feat: make ShowMore more flexible [#1202](https://github.com/artsy/palette/pull/1202) ([@mdole](https://github.com/mdole))
+
+#### Authors: 1
+
+- Matt Dole ([@mdole](https://github.com/mdole))
+
+---
+
+# v24.1.0 (Tue Aug 30 2022)
+
+#### 🚀  Enhancement
+
+- feat: close dropdown only when link is clicked [#1203](https://github.com/artsy/palette/pull/1203) ([@dimatretyak](https://github.com/dimatretyak))
+
+#### 🐛  Bug Fix
+
+- feat: close dropdown only when link is clicked ([@dimatretyak](https://github.com/dimatretyak))
+
+#### 🏠  Internal
+
+- chore(deps): bump moment from 2.29.1 to 2.29.4 [#1191](https://github.com/artsy/palette/pull/1191) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 2
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Dima Tretyak (Dzmitry Tratsiak) ([@dimatretyak](https://github.com/dimatretyak))
+
+---
+
 # v24.0.1 (Fri Jul 15 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/Clickable/Clickable.d.ts

@@ -17,3 +17,4 @@ export declare const Clickable: import("styled-components").StyledComponentClass
     cursor?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;
+export declare const splitClickableProps: <U>(props: U) => [ClickableProps, Omit<U, keyof BoxProps | "cursor" | "textDecoration" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>];

package/dist/elements/Clickable/Clickable.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Clickable = void 0;
+exports.splitClickableProps = exports.Clickable = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
+var _splitProps = require("../../utils/splitProps");
+
 var _Box = require("../Box");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,18 +23,22 @@ var textDecoration = (0, _styledSystem.system)({
 });
 /** ClickableProps */
 
+var clickableMixin = (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDecoration);
 /**
  * Clickable is a utility component useful for wrapping things like <div>s
  * without having to deal with the requirements to make the <div> accessible.
  */
+
 var Clickable = _styledComponents.default.button.withConfig({
   displayName: "Clickable",
   componentId: "sc-10cr82y-0"
-})(["appearance:none;padding:0;border:0;margin:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDecoration));
+})(["appearance:none;padding:0;border:0;margin:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], clickableMixin);
 
 exports.Clickable = Clickable;
 Clickable.defaultProps = {
   cursor: "pointer",
   type: "button"
 };
+var splitClickableProps = (0, _splitProps.splitProps)(clickableMixin);
+exports.splitClickableProps = splitClickableProps;
 //# sourceMappingURL=Clickable.js.map

package/dist/elements/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Clickable/Clickable.tsx"],"names":["cursor","textDecoration","Clickable","styled","button","boxMixin","defaultProps","type"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,0BAAO;AAAEA,EAAAA,MAAM,EAAE;AAAV,CAAP,CAAf;AACA,IAAMC,cAAc,GAAG,0BAAO;AAAEA,EAAAA,cAAc,EAAE;AAAlB,CAAP,CAAvB;AAEA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,gKAUlB,2BAAQC,aAAR,EAAkBL,MAAlB,EAA0BC,cAA1B,CAVkB,CAAf;;;AAiBPC,SAAS,CAACI,YAAV,GAAyB;AACvBN,EAAAA,MAAM,EAAE,SADe;AAEvBO,EAAAA,IAAI,EAAE;AAFiB,CAAzB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${compose(boxMixin, cursor, textDecoration)}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n"],"file":"Clickable.js"}
+{"version":3,"sources":["../../../src/elements/Clickable/Clickable.tsx"],"names":["cursor","textDecoration","clickableMixin","boxMixin","Clickable","styled","button","defaultProps","type","splitClickableProps"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,0BAAO;AAAEA,EAAAA,MAAM,EAAE;AAAV,CAAP,CAAf;AACA,IAAMC,cAAc,GAAG,0BAAO;AAAEA,EAAAA,cAAc,EAAE;AAAlB,CAAP,CAAvB;AAEA;;AAOA,IAAMC,cAAc,GAAG,2BAAQC,aAAR,EAAkBH,MAAlB,EAA0BC,cAA1B,CAAvB;AAEA;AACA;AACA;AACA;;AACO,IAAMG,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,gKAUlBJ,cAVkB,CAAf;;;AAiBPE,SAAS,CAACG,YAAV,GAAyB;AACvBP,EAAAA,MAAM,EAAE,SADe;AAEvBQ,EAAAA,IAAI,EAAE;AAFiB,CAAzB;AAKO,IAAMC,mBAAmB,GAAG,4BAA2BP,cAA3B,CAA5B","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\nconst clickableMixin = compose(boxMixin, cursor, textDecoration)\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${clickableMixin}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n\nexport const splitClickableProps = splitProps<ClickableProps>(clickableMixin)\n"],"file":"Clickable.js"}

package/dist/elements/Dropdown/Dropdown.js

@@ -147,8 +147,17 @@ var Dropdown = function Dropdown(_ref) {
 
     var handleClick = function handleClick(event) {
       if (!panelRef.current || !openDropdownByClick) return;
+      var target = event.target;
+      var tagName = target.tagName.toLowerCase();
+      var isClosableElement = tagName === "a";
+      var element = target; // Find parent link element
+
+      if (!isClosableElement) {
+        element = target.closest("a");
+        isClosableElement = !!element;
+      }
 
-      if (panelRef.current.contains(event.target)) {
+      if (isClosableElement && element && panelRef.current.contains(element)) {
         onHide();
       }
     };

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","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":"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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  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"}
+{"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","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","transition","setTransition","translation","padding","anchorProps","onClick","onMouseEnter","onMouseLeave","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  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      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(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/FilterSelect/FilterSelect.js

@@ -93,7 +93,11 @@ var _FilterSelect = function _FilterSelect() {
     }, item));
   }) : /*#__PURE__*/React.createElement(_ShowMore.ShowMore, {
     expanded: expanded,
-    initial: initialItemsToShow
+    initial: initialItemsToShow,
+    variant: "xs",
+    textDecoration: "underline",
+    mt: 1,
+    textAlign: "left"
   }, itemsSorted.map(function (item) {
     return /*#__PURE__*/React.createElement(_FilterSelectResultItem.FilterSelectResultItem, _extends({
       key: item.value

package/dist/elements/FilterSelect/FilterSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.tsx"],"names":["FilterSelect","props","_FilterSelect","filteredItems","initialItemsToShow","isFiltered","items","multiselect","onChange","order","query","selectedItems","length","orderItems","itemsOrdered","filterdItemsOrdered","itemsSorted","concat","expanded","isBelowTheFoldSelected","showNoResults","map","item","value","resultsSorted","selected","results","slice","INITIAL_ITEMS_TO_SHOW","isSelected"],"mappings":"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","sourcesContent":["import { intersection, orderBy, uniqBy } from \"lodash\"\nimport * as React from \"react\"\nimport { ShowMore } from \"../ShowMore\"\nimport { Flex } from \"../Flex\"\nimport { FilterSelectResultItem } from \"./Components/FilterSelectResultItem\"\nimport {\n  FilterSelectContextProvider,\n  FilterSelectState,\n  useFilterSelectContext,\n} from \"./Components/FilterSelectContext\"\nimport { FilterInput } from \"./Components/FilterInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Text } from \"../Text\"\nimport { INITIAL_ITEMS_TO_SHOW } from \"../ShowMore\"\nimport { useUpdateEffect } from \"../../utils\"\n\nexport type FilterSelectProps = Partial<FilterSelectState>\n\nexport const FilterSelect: React.FC<FilterSelectProps> = (props) => {\n  return (\n    <FilterSelectContextProvider {...props}>\n      <_FilterSelect />\n    </FilterSelectContextProvider>\n  )\n}\n\nconst _FilterSelect: React.FC = () => {\n  const {\n    filteredItems,\n    initialItemsToShow,\n    isFiltered,\n    items,\n    multiselect,\n    onChange,\n    order,\n    query,\n    selectedItems,\n  } = useFilterSelectContext()\n\n  // Dispatch change event\n  useUpdateEffect(() => {\n    if (onChange) {\n      onChange({\n        items,\n        filteredItems,\n        selectedItems,\n        query,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onChange, selectedItems])\n\n  if (items.length === 0) {\n    return null\n  }\n\n  const orderItems = (items) => orderBy(items, order[0], order[1])\n  const itemsOrdered = orderItems(items)\n  const filterdItemsOrdered = orderItems(filteredItems)\n  const itemsSorted = multiselect\n    ? // Move selected items to the top\n      uniqBy(selectedItems.concat(itemsOrdered), \"value\")\n    : itemsOrdered\n  const expanded = isBelowTheFoldSelected(selectedItems, itemsSorted)\n  const showNoResults = filteredItems.length === 0 && query !== \"\"\n\n  return (\n    <Flex flexDirection=\"column\">\n      <FilterInput mb={1} />\n\n      {query !== \"\" && (\n        <VisuallyHidden aria-live=\"polite\">\n          {`${filteredItems.length} result${\n            filteredItems.length === 1 ? \"\" : \"s\"\n          }`}\n        </VisuallyHidden>\n      )}\n\n      {showNoResults && <Text variant=\"sm\">No results.</Text>}\n\n      {isFiltered ? (\n        filterdItemsOrdered.map((item) => (\n          <FilterSelectResultItem key={item.value} {...item} />\n        ))\n      ) : (\n        <ShowMore expanded={expanded} initial={initialItemsToShow}>\n          {itemsSorted.map((item) => {\n            return <FilterSelectResultItem key={item.value} {...item} />\n          })}\n        </ShowMore>\n      )}\n    </Flex>\n  )\n}\n\nexport const isBelowTheFoldSelected = (selectedItems, resultsSorted) => {\n  const selected = selectedItems.map(({ value }) => value)\n  const results = resultsSorted\n    .slice(INITIAL_ITEMS_TO_SHOW)\n    .map(({ value }) => value)\n  const isSelected = intersection(selected, results).length > 0\n  return isSelected\n}\n"],"file":"FilterSelect.js"}
+{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.tsx"],"names":["FilterSelect","props","_FilterSelect","filteredItems","initialItemsToShow","isFiltered","items","multiselect","onChange","order","query","selectedItems","length","orderItems","itemsOrdered","filterdItemsOrdered","itemsSorted","concat","expanded","isBelowTheFoldSelected","showNoResults","map","item","value","resultsSorted","selected","results","slice","INITIAL_ITEMS_TO_SHOW","isSelected"],"mappings":"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","sourcesContent":["import { intersection, orderBy, uniqBy } from \"lodash\"\nimport * as React from \"react\"\nimport { ShowMore } from \"../ShowMore\"\nimport { Flex } from \"../Flex\"\nimport { FilterSelectResultItem } from \"./Components/FilterSelectResultItem\"\nimport {\n  FilterSelectContextProvider,\n  FilterSelectState,\n  useFilterSelectContext,\n} from \"./Components/FilterSelectContext\"\nimport { FilterInput } from \"./Components/FilterInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Text } from \"../Text\"\nimport { INITIAL_ITEMS_TO_SHOW } from \"../ShowMore\"\nimport { useUpdateEffect } from \"../../utils\"\n\nexport type FilterSelectProps = Partial<FilterSelectState>\n\nexport const FilterSelect: React.FC<FilterSelectProps> = (props) => {\n  return (\n    <FilterSelectContextProvider {...props}>\n      <_FilterSelect />\n    </FilterSelectContextProvider>\n  )\n}\n\nconst _FilterSelect: React.FC = () => {\n  const {\n    filteredItems,\n    initialItemsToShow,\n    isFiltered,\n    items,\n    multiselect,\n    onChange,\n    order,\n    query,\n    selectedItems,\n  } = useFilterSelectContext()\n\n  // Dispatch change event\n  useUpdateEffect(() => {\n    if (onChange) {\n      onChange({\n        items,\n        filteredItems,\n        selectedItems,\n        query,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onChange, selectedItems])\n\n  if (items.length === 0) {\n    return null\n  }\n\n  const orderItems = (items) => orderBy(items, order[0], order[1])\n  const itemsOrdered = orderItems(items)\n  const filterdItemsOrdered = orderItems(filteredItems)\n  const itemsSorted = multiselect\n    ? // Move selected items to the top\n      uniqBy(selectedItems.concat(itemsOrdered), \"value\")\n    : itemsOrdered\n  const expanded = isBelowTheFoldSelected(selectedItems, itemsSorted)\n  const showNoResults = filteredItems.length === 0 && query !== \"\"\n\n  return (\n    <Flex flexDirection=\"column\">\n      <FilterInput mb={1} />\n\n      {query !== \"\" && (\n        <VisuallyHidden aria-live=\"polite\">\n          {`${filteredItems.length} result${\n            filteredItems.length === 1 ? \"\" : \"s\"\n          }`}\n        </VisuallyHidden>\n      )}\n\n      {showNoResults && <Text variant=\"sm\">No results.</Text>}\n\n      {isFiltered ? (\n        filterdItemsOrdered.map((item) => (\n          <FilterSelectResultItem key={item.value} {...item} />\n        ))\n      ) : (\n        <ShowMore\n          expanded={expanded}\n          initial={initialItemsToShow}\n          variant={\"xs\"}\n          textDecoration={\"underline\"}\n          mt={1}\n          textAlign=\"left\"\n        >\n          {itemsSorted.map((item) => {\n            return <FilterSelectResultItem key={item.value} {...item} />\n          })}\n        </ShowMore>\n      )}\n    </Flex>\n  )\n}\n\nexport const isBelowTheFoldSelected = (selectedItems, resultsSorted) => {\n  const selected = selectedItems.map(({ value }) => value)\n  const results = resultsSorted\n    .slice(INITIAL_ITEMS_TO_SHOW)\n    .map(({ value }) => value)\n  const isSelected = intersection(selected, results).length > 0\n  return isSelected\n}\n"],"file":"FilterSelect.js"}

package/dist/elements/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ForwardRefExoticComponent, Ref } from "react";
 import { BoxProps } from "../Box";
 import { Variant } from "./types";
 export interface Option {
@@ -20,6 +20,8 @@ export interface SelectProps extends BoxProps, Omit<React.HTMLAttributes<HTMLSel
     onSelect?: (value: string) => void;
 }
 /** A drop-down select menu */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: ForwardRefExoticComponent<SelectProps & {
+    ref?: Ref<HTMLElement>;
+}>;
 /** Creates a small caret */
 export declare const caretMixin: import("styled-components").FlattenInterpolation<any>[];

package/dist/elements/Select/Select.js

@@ -9,7 +9,7 @@ exports.caretMixin = exports.Select = void 0;
 
 var _themeGet = require("@styled-system/theme-get");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -27,8 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -48,7 +46,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /** A drop-down select menu */
-var Select = function Select(_ref) {
+var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var description = _ref.description,
       disabled = _ref.disabled,
       error = _ref.error,
@@ -99,6 +97,7 @@ var Select = function Select(_ref) {
     focus: !!focus,
     mt: variant !== "inline" && (title || description) ? 0.5 : 0
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
+    ref: ref,
     id: id,
     disabled: disabled,
     name: name,
@@ -118,8 +117,7 @@ var Select = function Select(_ref) {
     mt: 0.5,
     color: "red100"
   }, error));
-};
-
+});
 exports.Select = Select;
 Select.displayName = "Select";
 var resetMixin = (0, _styledComponents.css)(["appearance:none;background:none;border:none;outline:0;text-indent:0.01px;text-overflow:\"\";border-radius:0;&:-moz-focusring{color:transparent;text-shadow:0 0 0 black;}option:not(:checked){color:black;}"]);

package/dist/elements/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLSelectElement>, \"onSelect\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  variant?: Variant\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: React.FC<SelectProps> = ({\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  id,\n  name,\n  options,\n  required,\n  selected,\n  title,\n  variant = \"default\",\n  onSelect,\n  ...rest\n}) => {\n  const [boxProps, selectProps] = splitBoxProps(rest)\n\n  return (\n    <Box width=\"100%\" {...boxProps}>\n      <Flex\n        as=\"label\"\n        {...(variant === \"inline\"\n          ? {\n              flexDirection: \"row\",\n              alignItems: \"center\",\n            }\n          : {\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n            })}\n        {...(id ? { for: id } : {})}\n      >\n        <div>\n          {title && (\n            <Text\n              variant=\"xs\"\n              lineHeight={\n                variant === \"inline\" && description === undefined\n                  ? 1\n                  : undefined\n              }\n            >\n              {title}\n              {required && (\n                <Box as=\"span\" color=\"brand\">\n                  *\n                </Box>\n              )}\n            </Text>\n          )}\n\n          {description && (\n            <Text variant=\"xs\" color=\"black60\">\n              {description}\n            </Text>\n          )}\n        </div>\n\n        <Container\n          variant={variant}\n          disabled={!!disabled}\n          hover={!!hover}\n          error={error!}\n          focus={!!focus}\n          mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n        >\n          <select\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n            }}\n            {...selectProps}\n          >\n            {options.map(({ value, text }) => {\n              return (\n                <option value={value} key={value}>\n                  {text}\n                </option>\n              )\n            })}\n          </select>\n        </Container>\n      </Flex>\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 0;\n    border-bottom: 1px solid;\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","displayName","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLSelectElement>, \"onSelect\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  variant?: Variant\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n  SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      variant = \"default\",\n      onSelect,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        <Flex\n          as=\"label\"\n          {...(variant === \"inline\"\n            ? {\n                flexDirection: \"row\",\n                alignItems: \"center\",\n              }\n            : {\n                flexDirection: \"column\",\n                alignItems: \"flex-start\",\n              })}\n          {...(id ? { for: id } : {})}\n        >\n          <div>\n            {title && (\n              <Text\n                variant=\"xs\"\n                lineHeight={\n                  variant === \"inline\" && description === undefined\n                    ? 1\n                    : undefined\n                }\n              >\n                {title}\n                {required && (\n                  <Box as=\"span\" color=\"brand\">\n                    *\n                  </Box>\n                )}\n              </Text>\n            )}\n\n            {description && (\n              <Text variant=\"xs\" color=\"black60\">\n                {description}\n              </Text>\n            )}\n          </div>\n\n          <Container\n            variant={variant}\n            disabled={!!disabled}\n            hover={!!hover}\n            error={error!}\n            focus={!!focus}\n            mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n          >\n            <select\n              ref={ref as any}\n              id={id}\n              disabled={disabled}\n              name={name}\n              value={selected}\n              onChange={(event) => {\n                onSelect && onSelect(event.target.value)\n              }}\n              {...selectProps}\n            >\n              {options.map(({ value, text }) => {\n                return (\n                  <option value={value} key={value}>\n                    {text}\n                  </option>\n                )\n              })}\n            </select>\n          </Container>\n        </Flex>\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 0;\n    border-bottom: 1px solid;\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n"],"file":"Select.js"}

package/dist/elements/ShowMore/ShowMore.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
-export interface ShowMoreProps {
+import { ClickableProps } from "../Clickable";
+import { TextProps } from "../Text";
+export interface ShowMoreProps extends ClickableProps, Pick<TextProps, "variant"> {
     children: React.ReactNode;
     initial?: number;
     expanded?: boolean;
+    hideText?: string;
+    showMoreText?: string;
 }
 export declare const INITIAL_ITEMS_TO_SHOW = 6;
 export declare const ShowMore: React.FC<ShowMoreProps>;

package/dist/elements/ShowMore/ShowMore.js

@@ -13,10 +13,14 @@ var _Clickable = require("../Clickable");
 
 var _Text = require("../Text");
 
+var _excluded = ["initial", "children", "expanded", "hideText", "showMoreText"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -29,6 +33,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var INITIAL_ITEMS_TO_SHOW = 6;
 exports.INITIAL_ITEMS_TO_SHOW = INITIAL_ITEMS_TO_SHOW;
 
@@ -37,7 +45,12 @@ var ShowMore = function ShowMore(_ref) {
       initial = _ref$initial === void 0 ? INITIAL_ITEMS_TO_SHOW : _ref$initial,
       children = _ref.children,
       _ref$expanded = _ref.expanded,
-      expanded = _ref$expanded === void 0 ? false : _ref$expanded;
+      expanded = _ref$expanded === void 0 ? false : _ref$expanded,
+      _ref$hideText = _ref.hideText,
+      hideText = _ref$hideText === void 0 ? "Hide" : _ref$hideText,
+      _ref$showMoreText = _ref.showMoreText,
+      showMoreText = _ref$showMoreText === void 0 ? "Show more" : _ref$showMoreText,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(expanded),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47,18 +60,21 @@ var ShowMore = function ShowMore(_ref) {
   var nodes = _react.Children.toArray(children).filter(_react.isValidElement);
 
   var hasMore = nodes.length > initial;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isExpanded ? nodes : nodes.slice(0, initial), hasMore && /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    mt: 1,
-    textDecoration: "underline",
-    textAlign: "left",
+
+  var _splitClickableProps = (0, _Clickable.splitClickableProps)(rest),
+      _splitClickableProps2 = _slicedToArray(_splitClickableProps, 2),
+      clickableProps = _splitClickableProps2[0],
+      variant = _splitClickableProps2[1].variant;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isExpanded ? nodes : nodes.slice(0, initial), hasMore && /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, _extends({
     onClick: function onClick() {
       return setExpanded(function (visibility) {
         return !visibility;
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, isExpanded ? "Hide" : "Show more")));
+  }, clickableProps), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: variant
+  }, isExpanded ? hideText : showMoreText)));
 };
 
 exports.ShowMore = ShowMore;

package/dist/elements/ShowMore/ShowMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ShowMore/ShowMore.tsx"],"names":["INITIAL_ITEMS_TO_SHOW","ShowMore","initial","children","expanded","isExpanded","setExpanded","nodes","Children","toArray","filter","isValidElement","hasMore","length","slice","visibility"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;AAQO,IAAMA,qBAAqB,GAAG,CAA9B;;;AAEA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAI3C;AAAA,0BAHJC,OAGI;AAAA,MAHJA,OAGI,6BAHMF,qBAGN;AAAA,MAFJG,QAEI,QAFJA,QAEI;AAAA,2BADJC,QACI;AAAA,MADJA,QACI,8BADO,KACP;;AACJ,kBAAkC,qBAASA,QAAT,CAAlC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,WAAnB;;AACA,MAAMC,KAAK,GAAGC,gBAASC,OAAT,CAAiBN,QAAjB,EAA2BO,MAA3B,CAAkCC,qBAAlC,CAAd;;AACA,MAAMC,OAAO,GAAGL,KAAK,CAACM,MAAN,GAAeX,OAA/B;AAEA,sBACE,4DACGG,UAAU,GAAGE,KAAH,GAAWA,KAAK,CAACO,KAAN,CAAY,CAAZ,EAAeZ,OAAf,CADxB,EAGGU,OAAO,iBACN,6BAAC,oBAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,cAAc,EAAC,WAFjB;AAGE,IAAA,SAAS,EAAC,MAHZ;AAIE,IAAA,OAAO,EAAE;AAAA,aAAMN,WAAW,CAAC,UAACS,UAAD;AAAA,eAAgB,CAACA,UAAjB;AAAA,OAAD,CAAjB;AAAA;AAJX,kBAME,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBV,UAAU,GAAG,MAAH,GAAY,WAA1C,CANF,CAJJ,CADF;AAgBD,CAzBM","sourcesContent":["import React, { Children, isValidElement, useState } from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport interface ShowMoreProps {\n  children: React.ReactNode\n  initial?: number\n  expanded?: boolean\n}\n\nexport const INITIAL_ITEMS_TO_SHOW = 6\n\nexport const ShowMore: React.FC<ShowMoreProps> = ({\n  initial = INITIAL_ITEMS_TO_SHOW,\n  children,\n  expanded = false,\n}) => {\n  const [isExpanded, setExpanded] = useState(expanded)\n  const nodes = Children.toArray(children).filter(isValidElement)\n  const hasMore = nodes.length > initial\n\n  return (\n    <>\n      {isExpanded ? nodes : nodes.slice(0, initial)}\n\n      {hasMore && (\n        <Clickable\n          mt={1}\n          textDecoration=\"underline\"\n          textAlign=\"left\"\n          onClick={() => setExpanded((visibility) => !visibility)}\n        >\n          <Text variant=\"xs\">{isExpanded ? \"Hide\" : \"Show more\"}</Text>\n        </Clickable>\n      )}\n    </>\n  )\n}\n"],"file":"ShowMore.js"}
+{"version":3,"sources":["../../../src/elements/ShowMore/ShowMore.tsx"],"names":["INITIAL_ITEMS_TO_SHOW","ShowMore","initial","children","expanded","hideText","showMoreText","rest","isExpanded","setExpanded","nodes","Children","toArray","filter","isValidElement","hasMore","length","clickableProps","variant","slice","visibility"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,IAAMA,qBAAqB,GAAG,CAA9B;;;AAEA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAO3C;AAAA,0BANJC,OAMI;AAAA,MANJA,OAMI,6BANMF,qBAMN;AAAA,MALJG,QAKI,QALJA,QAKI;AAAA,2BAJJC,QAII;AAAA,MAJJA,QAII,8BAJO,KAIP;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,MAGP;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,WAEX;AAAA,MADDC,IACC;;AACJ,kBAAkC,qBAASH,QAAT,CAAlC;AAAA;AAAA,MAAOI,UAAP;AAAA,MAAmBC,WAAnB;;AACA,MAAMC,KAAK,GAAGC,gBAASC,OAAT,CAAiBT,QAAjB,EAA2BU,MAA3B,CAAkCC,qBAAlC,CAAd;;AACA,MAAMC,OAAO,GAAGL,KAAK,CAACM,MAAN,GAAed,OAA/B;;AAEA,6BAAsC,oCAAoBK,IAApB,CAAtC;AAAA;AAAA,MAAOU,cAAP;AAAA,MAAyBC,OAAzB,4BAAyBA,OAAzB;;AAEA,sBACE,4DACGV,UAAU,GAAGE,KAAH,GAAWA,KAAK,CAACS,KAAN,CAAY,CAAZ,EAAejB,OAAf,CADxB,EAGGa,OAAO,iBACN,6BAAC,oBAAD;AACE,IAAA,OAAO,EAAE;AAAA,aAAMN,WAAW,CAAC,UAACW,UAAD;AAAA,eAAgB,CAACA,UAAjB;AAAA,OAAD,CAAjB;AAAA;AADX,KAEMH,cAFN,gBAIE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAEC;AAAf,KAAyBV,UAAU,GAAGH,QAAH,GAAcC,YAAjD,CAJF,CAJJ,CADF;AAcD,CA5BM","sourcesContent":["import React, { Children, isValidElement, useState } from \"react\"\nimport { Clickable, ClickableProps, splitClickableProps } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface ShowMoreProps\n  extends ClickableProps,\n    Pick<TextProps, \"variant\"> {\n  children: React.ReactNode\n  initial?: number\n  expanded?: boolean\n  hideText?: string\n  showMoreText?: string\n}\n\nexport const INITIAL_ITEMS_TO_SHOW = 6\n\nexport const ShowMore: React.FC<ShowMoreProps> = ({\n  initial = INITIAL_ITEMS_TO_SHOW,\n  children,\n  expanded = false,\n  hideText = \"Hide\",\n  showMoreText = \"Show more\",\n  ...rest\n}) => {\n  const [isExpanded, setExpanded] = useState(expanded)\n  const nodes = Children.toArray(children).filter(isValidElement)\n  const hasMore = nodes.length > initial\n\n  const [clickableProps, { variant }] = splitClickableProps(rest)\n\n  return (\n    <>\n      {isExpanded ? nodes : nodes.slice(0, initial)}\n\n      {hasMore && (\n        <Clickable\n          onClick={() => setExpanded((visibility) => !visibility)}\n          {...clickableProps}\n        >\n          <Text variant={variant}>{isExpanded ? hideText : showMoreText}</Text>\n        </Clickable>\n      )}\n    </>\n  )\n}\n"],"file":"ShowMore.js"}

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

@@ -3,3 +3,9 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => JSX.Element;
+export declare const CommaSeparatedList: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/elements/ShowMore/ShowMore.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Default = exports.CommaSeparatedList = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -44,4 +44,36 @@ var Default = function Default() {
 
 exports.Default = Default;
 Default.displayName = "Default";
+
+var CommaSeparatedList = function CommaSeparatedList() {
+  var artists = ["Monica Kim Garza", "John Houck", "Zemba Luzamba"];
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      expanded: true
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_ShowMore.ShowMore, {
+    initial: 1,
+    variant: "lg",
+    textDecoration: "underline",
+    mt: 1
+  }, artists.map(function (artist, index) {
+    var separator = ", ";
+
+    if (index === artists.length - 1) {
+      separator = ". ";
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "lg",
+      as: "span",
+      key: index
+    }, artist, separator);
+  })));
+};
+
+exports.CommaSeparatedList = CommaSeparatedList;
+CommaSeparatedList.displayName = "CommaSeparatedList";
+CommaSeparatedList.story = {
+  name: "Works with comma-separated list"
+};
 //# sourceMappingURL=ShowMore.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ShowMore/ShowMore.story.tsx"],"names":["title","Default","expanded"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AAAgC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAAxC,kBACE,6BAAC,kBAAD;AAAU,IAAA,OAAO,EAAE;AAAnB,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aADF,eAEE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,cAFF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aAHF,eAIE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,cAJF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aALF,eAME,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aANF,CADF,CADF;AAYD,CAbM;;;AAAMD,O","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { ShowMore, ShowMoreProps } from \"./ShowMore\"\nimport { Text } from \"../Text\"\n\nexport default {\n  title: \"Components/ShowMore\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ShowMoreProps>> states={[{}, { expanded: true }]}>\n      <ShowMore initial={3}>\n        <Text variant=\"sm-display\">First</Text>\n        <Text variant=\"sm-display\">Second</Text>\n        <Text variant=\"sm-display\">Third</Text>\n        <Text variant=\"sm-display\">Fourth</Text>\n        <Text variant=\"sm-display\">Fifth</Text>\n        <Text variant=\"sm-display\">Sixth</Text>\n      </ShowMore>\n    </States>\n  )\n}\n"],"file":"ShowMore.story.js"}
+{"version":3,"sources":["../../../src/elements/ShowMore/ShowMore.story.tsx"],"names":["title","Default","expanded","CommaSeparatedList","artists","map","artist","index","separator","length","story","name"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AAAgC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAAxC,kBACE,6BAAC,kBAAD;AAAU,IAAA,OAAO,EAAE;AAAnB,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aADF,eAEE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,cAFF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aAHF,eAIE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,cAJF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aALF,eAME,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aANF,CADF,CADF;AAYD,CAbM;;;AAAMD,O;;AAeN,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,MAAMC,OAAO,GAAG,CAAC,kBAAD,EAAqB,YAArB,EAAmC,eAAnC,CAAhB;AAEA,sBACE,6BAAC,uBAAD;AAAgC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEF,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAAxC,kBACE,6BAAC,kBAAD;AAAU,IAAA,OAAO,EAAE,CAAnB;AAAsB,IAAA,OAAO,EAAC,IAA9B;AAAmC,IAAA,cAAc,EAAC,WAAlD;AAA8D,IAAA,EAAE,EAAE;AAAlE,KACGE,OAAO,CAACC,GAAR,CAAY,UAACC,MAAD,EAASC,KAAT,EAAmB;AAC9B,QAAIC,SAAS,GAAG,IAAhB;;AACA,QAAID,KAAK,KAAKH,OAAO,CAACK,MAAR,GAAiB,CAA/B,EAAkC;AAChCD,MAAAA,SAAS,GAAG,IAAZ;AACD;;AAED,wBACE,6BAAC,UAAD;AAAM,MAAA,OAAO,EAAC,IAAd;AAAmB,MAAA,EAAE,EAAC,MAAtB;AAA6B,MAAA,GAAG,EAAED;AAAlC,OACGD,MADH,EAEGE,SAFH,CADF;AAMD,GAZA,CADH,CADF,CADF;AAmBD,CAtBM;;;AAAML,kB;AAwBbA,kBAAkB,CAACO,KAAnB,GAA2B;AACzBC,EAAAA,IAAI,EAAE;AADmB,CAA3B","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { ShowMore, ShowMoreProps } from \"./ShowMore\"\nimport { Text } from \"../Text\"\n\nexport default {\n  title: \"Components/ShowMore\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ShowMoreProps>> states={[{}, { expanded: true }]}>\n      <ShowMore initial={3}>\n        <Text variant=\"sm-display\">First</Text>\n        <Text variant=\"sm-display\">Second</Text>\n        <Text variant=\"sm-display\">Third</Text>\n        <Text variant=\"sm-display\">Fourth</Text>\n        <Text variant=\"sm-display\">Fifth</Text>\n        <Text variant=\"sm-display\">Sixth</Text>\n      </ShowMore>\n    </States>\n  )\n}\n\nexport const CommaSeparatedList = () => {\n  const artists = [\"Monica Kim Garza\", \"John Houck\", \"Zemba Luzamba\"]\n\n  return (\n    <States<Partial<ShowMoreProps>> states={[{}, { expanded: true }]}>\n      <ShowMore initial={1} variant=\"lg\" textDecoration=\"underline\" mt={1}>\n        {artists.map((artist, index) => {\n          let separator = \", \"\n          if (index === artists.length - 1) {\n            separator = \". \"\n          }\n\n          return (\n            <Text variant=\"lg\" as=\"span\" key={index}>\n              {artist}\n              {separator}\n            </Text>\n          )\n        })}\n      </ShowMore>\n    </States>\n  )\n}\n\nCommaSeparatedList.story = {\n  name: \"Works with comma-separated list\",\n}\n"],"file":"ShowMore.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "24.0.1",
+  "version": "24.1.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -176,5 +176,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "f29263b42244548cedfb43b681ecd47fdeba0996"
+  "gitHead": "5a339fb3ee52623b351fe72f8ec0441fb4474183"
 }