@launchpad-ui/dropdown 0.1.0

package/README.md

@@ -0,0 +1,14 @@
+# @launchpad-ui/dropdown
+
+> An element that displays a list of actions or options to a user.
+
+[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/dropdown?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/dropdown)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/dropdown?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/dropdown)
+
+## Installation
+
+```sh
+$ yarn add @launchpad-ui/dropdown
+# or
+$ npm install @launchpad-ui/dropdown
+```

package/dist/Dropdown.d.ts

@@ -0,0 +1,43 @@
+import type { PopoverPlacement } from '@launchpad-ui/popover';
+import { Button } from '@launchpad-ui/button';
+import { Component } from 'react';
+declare type DropdownState = {
+    isOpen?: boolean;
+} & Record<string | number, unknown>;
+declare type DropdownProps<T extends string | object | number> = {
+    isOpen?: boolean;
+    placement?: PopoverPlacement;
+    onSelect?: (item: T, stateChanges: DropdownState) => void;
+    onStateChange?: (state: Record<string | number, unknown>) => void;
+    disabled?: boolean;
+    targetClassName?: string;
+    children: React.ReactNode;
+    onInteraction?: (nextIsOpen: boolean) => void;
+    popoverClassName?: string;
+    enforceFocus?: boolean;
+    [key: string]: unknown;
+};
+declare class Dropdown<T extends string | object | number> extends Component<DropdownProps<T>, DropdownState> {
+    triggerElement: HTMLElement | null | Button;
+    refHandlers: {
+        trigger: (node: HTMLElement | null | Button) => void;
+    };
+    state: {
+        isOpen: boolean;
+    };
+    componentDidUpdate(prevProps: DropdownProps<T>, prevState: DropdownState): void;
+    render(): JSX.Element;
+    renderTrigger(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    renderContent(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    handleSelect: (item: T) => void;
+    handlePopoverInteraction: (nextIsOpen: boolean) => void;
+    parseChildren(): {
+        target: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        content: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    };
+    updateState(state: DropdownState, selectedItem?: T): void;
+    isControlledProp(key: string): boolean;
+}
+export { Dropdown };
+export type { DropdownProps };
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,OAAO,EAA0B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC;AAErC,aAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,cAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS,CAClE,aAAa,CAAC,CAAC,CAAC,EAChB,aAAa,CACd;IACC,cAAc,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAAQ;IACnD,WAAW;wBACO,WAAW,GAAG,IAAI,GAAG,MAAM;MAG3C;IAEF,KAAK;;MAEH;IAEF,kBAAkB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa;IA0BxE,MAAM;IA4BN,aAAa;IASb,aAAa;IAMb,YAAY,SAAU,CAAC,UAErB;IAEF,wBAAwB,eAAgB,OAAO,UAE7C;IAEF,aAAa;;;;IAQb,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,CAAC,EAAE,CAAC;IA6BlD,gBAAgB,CAAC,GAAG,EAAE,MAAM;CAG7B;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/DropdownButton.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Button, ButtonKind, ButtonSize } from '@launchpad-ui/button';
+declare type DropdownButtonProps = {
+    hideCaret?: boolean;
+    kind?: ButtonKind;
+    size?: ButtonSize;
+    className?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    onClick?(v: React.MouseEvent): void;
+    tooltip?: string;
+    tooltipOptions?: object;
+    testId?: string;
+};
+declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<Button>>;
+export { DropdownButton };
+export type { DropdownButtonProps };
+//# sourceMappingURL=DropdownButton.d.ts.map

package/dist/DropdownButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../src/DropdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAItE,aAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,cAAc,wGAQlB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { DropdownProps } from './Dropdown';
+export type { DropdownButtonProps } from './DropdownButton';
+export { Dropdown } from './Dropdown';
+export { DropdownButton } from './DropdownButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,130 @@
+// ../../scripts/react-shim.js
+import * as React from "react";
+
+// src/Dropdown.tsx
+import { Button } from "@launchpad-ui/button";
+import { Popover } from "@launchpad-ui/popover";
+import cx from "clsx";
+import { Children, cloneElement, Component } from "react";
+var Dropdown = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.triggerElement = null;
+    this.refHandlers = {
+      trigger: (node) => {
+        this.triggerElement = node;
+      }
+    };
+    this.state = {
+      isOpen: this.isControlledProp("isOpen") ? this.props.isOpen : false
+    };
+    this.handleSelect = (item) => {
+      this.updateState({ isOpen: false }, item);
+    };
+    this.handlePopoverInteraction = (nextIsOpen) => {
+      this.updateState({ isOpen: nextIsOpen });
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.isOpen !== prevProps.isOpen) {
+      this.setState({ isOpen: this.props.isOpen });
+    }
+    if (prevState.isOpen !== this.state.isOpen && this.state.isOpen === false) {
+      requestAnimationFrame(() => {
+        const current = this.triggerElement;
+        if (!current) {
+          return;
+        }
+        const buttonElement = current instanceof Button && current.getDomElement?.() || current;
+        const hasModal = buttonElement?.closest?.(".has-modal");
+        !hasModal && buttonElement?.focus();
+      });
+    }
+  }
+  render() {
+    const {
+      placement,
+      disabled,
+      targetClassName,
+      isOpen: isOpenProp,
+      onInteraction,
+      ...rest
+    } = this.props;
+    const { isOpen } = this.state;
+    const popoverTargetClassname = cx("Dropdown", targetClassName);
+    return /* @__PURE__ */ React.createElement(Popover, {
+      isOpen,
+      placement,
+      onInteraction: onInteraction || this.handlePopoverInteraction,
+      restrictHeight: false,
+      disabled,
+      targetClassName: popoverTargetClassname,
+      ...rest
+    }, this.renderTrigger(), this.renderContent());
+  }
+  renderTrigger() {
+    return cloneElement(this.parseChildren().target, {
+      "aria-haspopup": true,
+      "aria-expanded": this.state.isOpen ? true : false,
+      ref: this.refHandlers.trigger,
+      isopen: this.state.isOpen?.toString()
+    });
+  }
+  renderContent() {
+    return cloneElement(this.parseChildren().content, {
+      onSelect: this.handleSelect
+    });
+  }
+  parseChildren() {
+    const [targetChild, contentChild] = Children.toArray(this.props.children);
+    return {
+      target: targetChild,
+      content: contentChild
+    };
+  }
+  updateState(state, selectedItem) {
+    const nextState = {};
+    const stateChanges = {};
+    this.setState((currentState) => {
+      Object.keys(state).forEach((key) => {
+        if (currentState[key] !== state[key]) {
+          stateChanges[key] = state[key];
+        }
+        if (!this.isControlledProp(key)) {
+          nextState[key] = state[key];
+        }
+      });
+      return nextState;
+    }, () => {
+      if (selectedItem !== void 0 && selectedItem !== null) {
+        this.props.onSelect?.(selectedItem, stateChanges);
+      }
+      if (Object.keys(stateChanges).length) {
+        this.props.onStateChange?.(stateChanges);
+      }
+    });
+  }
+  isControlledProp(key) {
+    return this.props[key] !== void 0;
+  }
+};
+
+// src/DropdownButton.tsx
+import { Button as Button2 } from "@launchpad-ui/button";
+import { ExpandMore, IconSize } from "@launchpad-ui/icons";
+import { forwardRef } from "react";
+var DropdownButton = forwardRef((props, ref) => {
+  const { children, hideCaret, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Button2, {
+    ...rest,
+    ref
+  }, children, " ", !hideCaret && /* @__PURE__ */ React.createElement(ExpandMore, {
+    size: IconSize.SMALL
+  }));
+});
+DropdownButton.displayName = "DropdownButton";
+export {
+  Dropdown,
+  DropdownButton
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../scripts/react-shim.js", "../src/Dropdown.tsx", "../src/DropdownButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { PopoverPlacement } from '@launchpad-ui/popover';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Popover } from '@launchpad-ui/popover';\nimport cx from 'clsx';\nimport { Children, cloneElement, Component } from 'react';\n\ntype DropdownState = {\n  isOpen?: boolean;\n} & Record<string | number, unknown>;\n\ntype DropdownProps<T extends string | object | number> = {\n  isOpen?: boolean;\n  placement?: PopoverPlacement;\n  onSelect?: (item: T, stateChanges: DropdownState) => void;\n  onStateChange?: (state: Record<string | number, unknown>) => void;\n  disabled?: boolean;\n  targetClassName?: string;\n  children: React.ReactNode;\n  onInteraction?: (nextIsOpen: boolean) => void;\n  popoverClassName?: string;\n  enforceFocus?: boolean;\n  [key: string]: unknown;\n};\n\nclass Dropdown<T extends string | object | number> extends Component<\n  DropdownProps<T>,\n  DropdownState\n> {\n  triggerElement: HTMLElement | null | Button = null;\n  refHandlers = {\n    trigger: (node: HTMLElement | null | Button) => {\n      this.triggerElement = node;\n    },\n  };\n\n  state = {\n    isOpen: this.isControlledProp('isOpen') ? (this.props.isOpen as boolean) : false,\n  };\n\n  componentDidUpdate(prevProps: DropdownProps<T>, prevState: DropdownState) {\n    if (this.props.isOpen !== prevProps.isOpen) {\n      this.setState({ isOpen: this.props.isOpen });\n    }\n\n    // Focus the button upon closing for convenient tabbing\n    if (prevState.isOpen !== this.state.isOpen && this.state.isOpen === false) {\n      requestAnimationFrame(() => {\n        const current = this.triggerElement;\n        if (!current) {\n          return;\n        }\n        // Button can either be our own custom Button component or the native html button\n        const buttonElement = (current instanceof Button && current.getDomElement?.()) || current;\n\n        // If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n        // we let the modal components control their own focus.\n        // Note that this is not ideal since closing the modal will not cause the dropdown trigger\n        // to regain focus.\n        const hasModal = (buttonElement as HTMLElement)?.closest?.('.has-modal');\n\n        !hasModal && buttonElement?.focus();\n      });\n    }\n  }\n\n  render() {\n    const {\n      placement,\n      disabled,\n      targetClassName,\n      isOpen: isOpenProp,\n      onInteraction,\n      ...rest\n    } = this.props;\n    const { isOpen } = this.state;\n    const popoverTargetClassname = cx('Dropdown', targetClassName);\n\n    return (\n      <Popover\n        isOpen={isOpen}\n        placement={placement}\n        onInteraction={onInteraction || this.handlePopoverInteraction}\n        restrictHeight={false}\n        disabled={disabled}\n        targetClassName={popoverTargetClassname}\n        {...rest}\n      >\n        {this.renderTrigger()}\n        {this.renderContent()}\n      </Popover>\n    );\n  }\n\n  renderTrigger() {\n    return cloneElement(this.parseChildren().target, {\n      'aria-haspopup': true,\n      'aria-expanded': this.state.isOpen ? true : false,\n      ref: this.refHandlers.trigger,\n      isopen: this.state.isOpen?.toString(),\n    });\n  }\n\n  renderContent() {\n    return cloneElement(this.parseChildren().content, {\n      onSelect: this.handleSelect,\n    });\n  }\n\n  handleSelect = (item: T) => {\n    this.updateState({ isOpen: false }, item);\n  };\n\n  handlePopoverInteraction = (nextIsOpen: boolean) => {\n    this.updateState({ isOpen: nextIsOpen });\n  };\n\n  parseChildren() {\n    const [targetChild, contentChild] = Children.toArray(this.props.children);\n    return {\n      target: targetChild as React.ReactElement,\n      content: contentChild as React.ReactElement,\n    };\n  }\n\n  updateState(state: DropdownState, selectedItem?: T) {\n    const nextState: DropdownState = {};\n    const stateChanges: DropdownState = {};\n    this.setState(\n      (currentState) => {\n        Object.keys(state).forEach((key) => {\n          if (currentState[key] !== state[key]) {\n            stateChanges[key] = state[key];\n          }\n\n          if (!this.isControlledProp(key)) {\n            nextState[key] = state[key];\n          }\n        });\n\n        return nextState;\n      },\n      () => {\n        if (selectedItem !== undefined && selectedItem !== null) {\n          this.props.onSelect?.(selectedItem, stateChanges);\n        }\n\n        if (Object.keys(stateChanges).length) {\n          this.props.onStateChange?.(stateChanges);\n        }\n      }\n    );\n  }\n\n  isControlledProp(key: string) {\n    return this.props[key] !== undefined;\n  }\n}\n\nexport { Dropdown };\nexport type { DropdownProps };\n", "import { Button, ButtonKind, ButtonSize } from '@launchpad-ui/button';\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = {\n  hideCaret?: boolean;\n  kind?: ButtonKind;\n  size?: ButtonSize;\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  onClick?(v: React.MouseEvent): void;\n  tooltip?: string;\n  tooltipOptions?: object;\n  testId?: string;\n};\n\nconst DropdownButton = forwardRef<Button, DropdownButtonProps>((props, ref) => {\n  const { children, hideCaret, ...rest } = props;\n\n  return (\n    <Button {...rest} ref={ref}>\n      {children} {!hideCaret && <ExpandMore size={IconSize.SMALL} />}\n    </Button>\n  );\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.js

@@ -0,0 +1,160 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Dropdown: () => Dropdown,
+  DropdownButton: () => DropdownButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../scripts/react-shim.js
+var React = __toESM(require("react"));
+
+// src/Dropdown.tsx
+var import_button = require("@launchpad-ui/button");
+var import_popover = require("@launchpad-ui/popover");
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+var Dropdown = class extends import_react.Component {
+  constructor() {
+    super(...arguments);
+    this.triggerElement = null;
+    this.refHandlers = {
+      trigger: (node) => {
+        this.triggerElement = node;
+      }
+    };
+    this.state = {
+      isOpen: this.isControlledProp("isOpen") ? this.props.isOpen : false
+    };
+    this.handleSelect = (item) => {
+      this.updateState({ isOpen: false }, item);
+    };
+    this.handlePopoverInteraction = (nextIsOpen) => {
+      this.updateState({ isOpen: nextIsOpen });
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.isOpen !== prevProps.isOpen) {
+      this.setState({ isOpen: this.props.isOpen });
+    }
+    if (prevState.isOpen !== this.state.isOpen && this.state.isOpen === false) {
+      requestAnimationFrame(() => {
+        const current = this.triggerElement;
+        if (!current) {
+          return;
+        }
+        const buttonElement = current instanceof import_button.Button && current.getDomElement?.() || current;
+        const hasModal = buttonElement?.closest?.(".has-modal");
+        !hasModal && buttonElement?.focus();
+      });
+    }
+  }
+  render() {
+    const {
+      placement,
+      disabled,
+      targetClassName,
+      isOpen: isOpenProp,
+      onInteraction,
+      ...rest
+    } = this.props;
+    const { isOpen } = this.state;
+    const popoverTargetClassname = (0, import_clsx.default)("Dropdown", targetClassName);
+    return /* @__PURE__ */ React.createElement(import_popover.Popover, {
+      isOpen,
+      placement,
+      onInteraction: onInteraction || this.handlePopoverInteraction,
+      restrictHeight: false,
+      disabled,
+      targetClassName: popoverTargetClassname,
+      ...rest
+    }, this.renderTrigger(), this.renderContent());
+  }
+  renderTrigger() {
+    return (0, import_react.cloneElement)(this.parseChildren().target, {
+      "aria-haspopup": true,
+      "aria-expanded": this.state.isOpen ? true : false,
+      ref: this.refHandlers.trigger,
+      isopen: this.state.isOpen?.toString()
+    });
+  }
+  renderContent() {
+    return (0, import_react.cloneElement)(this.parseChildren().content, {
+      onSelect: this.handleSelect
+    });
+  }
+  parseChildren() {
+    const [targetChild, contentChild] = import_react.Children.toArray(this.props.children);
+    return {
+      target: targetChild,
+      content: contentChild
+    };
+  }
+  updateState(state, selectedItem) {
+    const nextState = {};
+    const stateChanges = {};
+    this.setState((currentState) => {
+      Object.keys(state).forEach((key) => {
+        if (currentState[key] !== state[key]) {
+          stateChanges[key] = state[key];
+        }
+        if (!this.isControlledProp(key)) {
+          nextState[key] = state[key];
+        }
+      });
+      return nextState;
+    }, () => {
+      if (selectedItem !== void 0 && selectedItem !== null) {
+        this.props.onSelect?.(selectedItem, stateChanges);
+      }
+      if (Object.keys(stateChanges).length) {
+        this.props.onStateChange?.(stateChanges);
+      }
+    });
+  }
+  isControlledProp(key) {
+    return this.props[key] !== void 0;
+  }
+};
+
+// src/DropdownButton.tsx
+var import_button2 = require("@launchpad-ui/button");
+var import_icons = require("@launchpad-ui/icons");
+var import_react2 = require("react");
+var DropdownButton = (0, import_react2.forwardRef)((props, ref) => {
+  const { children, hideCaret, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(import_button2.Button, {
+    ...rest,
+    ref
+  }, children, " ", !hideCaret && /* @__PURE__ */ React.createElement(import_icons.ExpandMore, {
+    size: import_icons.IconSize.SMALL
+  }));
+});
+DropdownButton.displayName = "DropdownButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropdown,
+  DropdownButton
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../../../scripts/react-shim.js", "../src/Dropdown.tsx", "../src/DropdownButton.tsx"],
+  "sourcesContent": ["export type { DropdownProps } from './Dropdown';\nexport type { DropdownButtonProps } from './DropdownButton';\nexport { Dropdown } from './Dropdown';\nexport { DropdownButton } from './DropdownButton';\n", "import * as React from 'react';\nexport { React };\n", "import type { PopoverPlacement } from '@launchpad-ui/popover';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Popover } from '@launchpad-ui/popover';\nimport cx from 'clsx';\nimport { Children, cloneElement, Component } from 'react';\n\ntype DropdownState = {\n  isOpen?: boolean;\n} & Record<string | number, unknown>;\n\ntype DropdownProps<T extends string | object | number> = {\n  isOpen?: boolean;\n  placement?: PopoverPlacement;\n  onSelect?: (item: T, stateChanges: DropdownState) => void;\n  onStateChange?: (state: Record<string | number, unknown>) => void;\n  disabled?: boolean;\n  targetClassName?: string;\n  children: React.ReactNode;\n  onInteraction?: (nextIsOpen: boolean) => void;\n  popoverClassName?: string;\n  enforceFocus?: boolean;\n  [key: string]: unknown;\n};\n\nclass Dropdown<T extends string | object | number> extends Component<\n  DropdownProps<T>,\n  DropdownState\n> {\n  triggerElement: HTMLElement | null | Button = null;\n  refHandlers = {\n    trigger: (node: HTMLElement | null | Button) => {\n      this.triggerElement = node;\n    },\n  };\n\n  state = {\n    isOpen: this.isControlledProp('isOpen') ? (this.props.isOpen as boolean) : false,\n  };\n\n  componentDidUpdate(prevProps: DropdownProps<T>, prevState: DropdownState) {\n    if (this.props.isOpen !== prevProps.isOpen) {\n      this.setState({ isOpen: this.props.isOpen });\n    }\n\n    // Focus the button upon closing for convenient tabbing\n    if (prevState.isOpen !== this.state.isOpen && this.state.isOpen === false) {\n      requestAnimationFrame(() => {\n        const current = this.triggerElement;\n        if (!current) {\n          return;\n        }\n        // Button can either be our own custom Button component or the native html button\n        const buttonElement = (current instanceof Button && current.getDomElement?.()) || current;\n\n        // If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n        // we let the modal components control their own focus.\n        // Note that this is not ideal since closing the modal will not cause the dropdown trigger\n        // to regain focus.\n        const hasModal = (buttonElement as HTMLElement)?.closest?.('.has-modal');\n\n        !hasModal && buttonElement?.focus();\n      });\n    }\n  }\n\n  render() {\n    const {\n      placement,\n      disabled,\n      targetClassName,\n      isOpen: isOpenProp,\n      onInteraction,\n      ...rest\n    } = this.props;\n    const { isOpen } = this.state;\n    const popoverTargetClassname = cx('Dropdown', targetClassName);\n\n    return (\n      <Popover\n        isOpen={isOpen}\n        placement={placement}\n        onInteraction={onInteraction || this.handlePopoverInteraction}\n        restrictHeight={false}\n        disabled={disabled}\n        targetClassName={popoverTargetClassname}\n        {...rest}\n      >\n        {this.renderTrigger()}\n        {this.renderContent()}\n      </Popover>\n    );\n  }\n\n  renderTrigger() {\n    return cloneElement(this.parseChildren().target, {\n      'aria-haspopup': true,\n      'aria-expanded': this.state.isOpen ? true : false,\n      ref: this.refHandlers.trigger,\n      isopen: this.state.isOpen?.toString(),\n    });\n  }\n\n  renderContent() {\n    return cloneElement(this.parseChildren().content, {\n      onSelect: this.handleSelect,\n    });\n  }\n\n  handleSelect = (item: T) => {\n    this.updateState({ isOpen: false }, item);\n  };\n\n  handlePopoverInteraction = (nextIsOpen: boolean) => {\n    this.updateState({ isOpen: nextIsOpen });\n  };\n\n  parseChildren() {\n    const [targetChild, contentChild] = Children.toArray(this.props.children);\n    return {\n      target: targetChild as React.ReactElement,\n      content: contentChild as React.ReactElement,\n    };\n  }\n\n  updateState(state: DropdownState, selectedItem?: T) {\n    const nextState: DropdownState = {};\n    const stateChanges: DropdownState = {};\n    this.setState(\n      (currentState) => {\n        Object.keys(state).forEach((key) => {\n          if (currentState[key] !== state[key]) {\n            stateChanges[key] = state[key];\n          }\n\n          if (!this.isControlledProp(key)) {\n            nextState[key] = state[key];\n          }\n        });\n\n        return nextState;\n      },\n      () => {\n        if (selectedItem !== undefined && selectedItem !== null) {\n          this.props.onSelect?.(selectedItem, stateChanges);\n        }\n\n        if (Object.keys(stateChanges).length) {\n          this.props.onStateChange?.(stateChanges);\n        }\n      }\n    );\n  }\n\n  isControlledProp(key: string) {\n    return this.props[key] !== undefined;\n  }\n}\n\nexport { Dropdown };\nexport type { DropdownProps };\n", "import { Button, ButtonKind, ButtonSize } from '@launchpad-ui/button';\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = {\n  hideCaret?: boolean;\n  kind?: ButtonKind;\n  size?: ButtonSize;\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  onClick?(v: React.MouseEvent): void;\n  tooltip?: string;\n  tooltipOptions?: object;\n  testId?: string;\n};\n\nconst DropdownButton = forwardRef<Button, DropdownButtonProps>((props, ref) => {\n  const { children, hideCaret, ...rest } = props;\n\n  return (\n    <Button {...rest} ref={ref}>\n      {children} {!hideCaret && <ExpandMore size={IconSize.SMALL} />}\n    </Button>\n  );\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@launchpad-ui/dropdown",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "An element that displays a list of actions or options to a user.",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "source": "src/index.ts",
+  "dependencies": {
+    "@launchpad-ui/button": "~0.1.6",
+    "@launchpad-ui/icons": "~0.1.5",
+    "@launchpad-ui/popover": "~0.1.2",
+    "@launchpad-ui/tokens": "~0.1.4",
+    "clsx": "^1.1.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json && node build.js",
+    "clean": "rm -rf dist",
+    "e2e": "exit 0",
+    "lint": "eslint '**/*.{ts,tsx,js}'",
+    "test": "vitest run --coverage"
+  }
+}