@simplybusiness/mobius 9.2.0 → 9.3.0

package/dist/cjs/components/DropdownMenu/index.js

@@ -0,0 +1,344 @@
+"use strict";
+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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DropdownMenu/index.tsx
+var DropdownMenu_exports = {};
+__export(DropdownMenu_exports, {
+  DropdownMenu: () => DropdownMenu2
+});
+module.exports = __toCommonJS(DropdownMenu_exports);
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_react2 = require("react");
+var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
+var import_dedupe3 = __toESM(require("classnames/dedupe"));
+
+// src/components/Button/Button.tsx
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+
+// src/components/Button/Loading.tsx
+var import_icons = require("@simplybusiness/icons");
+
+// src/components/Icon/Icon.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_Icon = require("@simplybusiness/mobius/src/components/Icon/Icon.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ICON_PREFIX = "mobius-icon";
+var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function Icon({
+  ref,
+  icon,
+  className,
+  size = "xs",
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  title,
+  ...otherProps
+}) {
+  if (!icon) {
+    throw new Error("Must specify icon object");
+  }
+  const classes = (0, import_dedupe.default)(
+    "mobius",
+    "mobius-icon",
+    `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
+    className,
+    {
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    }
+  );
+  const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      className,
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: "1px",
+        whiteSpace: "nowrap"
+      },
+      ...otherProps,
+      children
+    }
+  );
+}
+
+// src/components/Button/Loading.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Loading = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+    children
+  ] });
+};
+
+// src/hooks/useButton/useButton.tsx
+var import_react = require("react");
+function useButton({
+  elementType = "button",
+  type = "button",
+  isDisabled = false,
+  href,
+  target,
+  rel,
+  role,
+  name,
+  value,
+  onClick,
+  onPress
+}) {
+  const realOnClick = (0, import_react.useCallback)(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(event);
+      onPress?.(event);
+    },
+    [isDisabled, onClick, onPress]
+  );
+  function getRole() {
+    if (role) {
+      return role;
+    }
+    if (elementType === "a") {
+      return void 0;
+    }
+    return "button";
+  }
+  const extraProps = elementType === "button" ? { type } : {
+    role: getRole()
+  };
+  return {
+    buttonProps: {
+      href: elementType === "a" ? href : void 0,
+      target: elementType === "a" ? target : void 0,
+      rel: elementType === "a" ? rel : void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      disabled: isDisabled || void 0,
+      "aria-disabled": isDisabled || void 0,
+      name: elementType === "input" || elementType === "button" ? name : void 0,
+      value: elementType === "input" || elementType === "button" ? value : void 0,
+      ...extraProps,
+      onClick: realOnClick
+    }
+  };
+}
+
+// src/components/Button/Success.tsx
+var import_icons2 = require("@simplybusiness/icons");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Success = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: import_icons2.tick, size: "md" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+] });
+
+// src/components/Button/Button.tsx
+var import_Button = require("@simplybusiness/mobius/src/components/Button/Button.css");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Button = ({ ref, ...props }) => {
+  const {
+    children,
+    elementType: Component = "button",
+    isDisabled,
+    isLoading,
+    isSuccess,
+    variant = "primary",
+    size = "md",
+    onPress,
+    onClick,
+    ...otherProps
+  } = props;
+  const { buttonProps } = useButton(props);
+  otherProps.className = (0, import_dedupe2.default)(
+    "mobius",
+    "mobius-button",
+    `--variant-${variant}`,
+    `--size-${size}`,
+    {
+      "--is-disabled": isDisabled,
+      "--is-loading": isLoading,
+      "--is-success": isSuccess && !isLoading
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loading, { children }) : children,
+    isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Success, {})
+  ] });
+};
+Button.displayName = "Button";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_DropdownMenu = require("@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DropdownMenu = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "nav",
+    trigger,
+    label = "Menu",
+    children,
+    ...otherProps
+  } = props;
+  const [activeId, setActiveId] = (0, import_react2.useState)(null);
+  const numberOfItems = import_react2.Children.count(children);
+  const {
+    buttonProps,
+    itemProps,
+    isOpen: open,
+    setIsOpen
+  } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
+  const classes = (0, import_dedupe3.default)(
+    "mobius",
+    "mobius-dropdown-menu",
+    otherProps.className
+  );
+  const triggerClasses = (0, import_dedupe3.default)("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = (0, import_dedupe3.default)("mobius", "mobius-dropdown-menu__list", {
+    "--is-open": open
+  });
+  const handleChildClick = ({ onClick }, index) => {
+    setActiveId(index);
+    setIsOpen(false);
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
+    trigger ? (0, import_react2.cloneElement)(trigger, {
+      className: triggerClasses,
+      open,
+      label,
+      ...buttonProps
+    }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: listClasses, role: "menu", children: import_react2.Children.map(children, (child, index) => {
+      if ((0, import_react2.isValidElement)(child)) {
+        return (0, import_react2.cloneElement)(child, {
+          onClick: () => handleChildClick(child.props, index),
+          active: index === activeId,
+          ...itemProps[index]
+        });
+      }
+      return child;
+    }) })
+  ] });
+};
+DropdownMenu.displayName = "DropdownMenu";
+
+// src/components/DropdownMenu/Item.tsx
+var import_react3 = require("react");
+var import_dedupe4 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Item = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "li",
+    active,
+    onClick,
+    children,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe4.default)(
+    "mobius",
+    "mobius-dropdown-menu__item",
+    { "--is-active": active },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Element, { ref, onClick, ...otherProps, children: import_react3.Children.map(children, (child) => {
+    if ((0, import_react3.isValidElement)(child)) {
+      const childClasses = (0, import_dedupe4.default)(
+        child.props.className,
+        classes
+      );
+      return (0, import_react3.cloneElement)(
+        child,
+        {
+          className: childClasses
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: classes, children: child });
+  }) });
+};
+Item.displayName = "DropdownMenu.Item";
+
+// src/components/DropdownMenu/index.tsx
+var DropdownMenu2 = Object.assign(
+  DropdownMenu,
+  {
+    Item
+  }
+);
+DropdownMenu2.displayName = "DropdownMenu";
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/DropdownMenu/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/DropdownMenu/index.tsx", "../../../../src/components/DropdownMenu/DropdownMenu.tsx", "../../../../src/components/Button/Button.tsx", "../../../../src/components/Button/Loading.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/VisuallyHidden/VisuallyHidden.tsx", "../../../../src/hooks/useButton/useButton.tsx", "../../../../src/components/Button/Success.tsx", "../../../../src/components/DropdownMenu/Item.tsx"],
+  "sourcesContent": ["import { DropdownMenu as DropdownMenuComponent } from \"./DropdownMenu\";\nimport { Item } from \"./Item\";\n\nimport type {\n  DropdownMenuElementType,\n  DropdownMenuProps,\n  DropdownMenuRef,\n} from \"./DropdownMenu\";\nimport type {\n  ItemProps as DropdownMenuItemProps,\n  ItemRef as DropdownMenuItemRef,\n  ItemElementType as DropdownMenuItemElementType,\n} from \"./Item\";\n\nexport interface DropdownMenuCompound extends React.FC<DropdownMenuProps> {\n  Item: React.FC<DropdownMenuItemProps>;\n}\n\nconst DropdownMenu: DropdownMenuCompound = Object.assign(\n  DropdownMenuComponent,\n  {\n    Item,\n  },\n);\n\nexport type {\n  DropdownMenuElementType,\n  DropdownMenuProps,\n  DropdownMenuRef,\n  DropdownMenuItemProps,\n  DropdownMenuItemRef,\n  DropdownMenuItemElementType,\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { Children, isValidElement, cloneElement, useState } from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport \"./DropdownMenu.css\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n  extends DOMProps, RefAttributes<DropdownMenuElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  label?: string;\n  trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n  onClick?: () => void;\n};\n\nconst DropdownMenu = ({ ref, ...props }: DropdownMenuProps) => {\n  const {\n    elementType: Element = \"nav\",\n    trigger,\n    label = \"Menu\",\n    children,\n    ...otherProps\n  } = props;\n  const [activeId, setActiveId] = useState<number | null>(null);\n  const numberOfItems = Children.count(children);\n  const {\n    buttonProps,\n    itemProps,\n    isOpen: open,\n    setIsOpen,\n  } = useDropdownMenu(numberOfItems);\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-dropdown-menu\",\n    otherProps.className,\n  );\n  const triggerClasses = classNames(\"mobius\", \"mobius-dropdown-menu__trigger\");\n  const listClasses = classNames(\"mobius\", \"mobius-dropdown-menu__list\", {\n    \"--is-open\": open,\n  });\n\n  const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n    setActiveId(index);\n    setIsOpen(false);\n\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  return (\n    <Element ref={ref} {...otherProps} className={classes}>\n      {trigger ? (\n        cloneElement(trigger, {\n          className: triggerClasses,\n          open,\n          label,\n          ...buttonProps,\n        } as Record<string, unknown>)\n      ) : (\n        <Button className={triggerClasses} {...buttonProps}>\n          {label}\n        </Button>\n      )}\n      <ul className={listClasses} role=\"menu\">\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            // DropdownMenu items accept onClick and active props\n            return cloneElement(child, {\n              onClick: () =>\n                handleChildClick(child.props as Record<string, unknown>, index),\n              active: index === activeId,\n              ...itemProps[index],\n            } as {\n              onClick?: () => void;\n              active?: boolean;\n              [key: string]: unknown;\n            });\n          }\n\n          return child;\n        })}\n      </ul>\n    </Element>\n  );\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n  /** The name of the button when submitted in a form */\n  name?: string | undefined;\n  /** The value of the button when submitted in a form */\n  value?: string | undefined;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n  const {\n    children,\n    elementType: Component = \"button\" as React.ElementType,\n    isDisabled,\n    isLoading,\n    isSuccess,\n    variant = \"primary\",\n    size = \"md\",\n\n    onPress,\n\n    onClick,\n    ...otherProps\n  } = props;\n  const { buttonProps } = useButton(props);\n\n  // Reshape class name and apply to outer element\n  otherProps.className = classNames(\n    \"mobius\",\n    \"mobius-button\",\n    `--variant-${variant}`,\n    `--size-${size}`,\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-loading\": isLoading,\n      \"--is-success\": isSuccess && !isLoading,\n    },\n    otherProps.className,\n  );\n\n  return (\n    <Component ref={ref} {...buttonProps} {...otherProps}>\n      {isLoading ? <Loading>{children}</Loading> : children}\n      {isSuccess && !isLoading && <Success />}\n    </Component>\n  );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n  children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n  const { children } = props;\n\n  return (\n    <>\n      <div className=\"mobius-button__icon-wrapper\">\n        <Icon icon={loading} spin size=\"md\" />\n      </div>\n      <VisuallyHidden className=\"mobius-button__loading-text\">\n        Loading\n      </VisuallyHidden>\n      {children}\n    </>\n  );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n  /** The content to visually hide. */\n  children?: ReactNode;\n  id?: string;\n  role?: AriaRole;\n\n  className?: string;\n\n  /**\n   * The element type for the container. Defaults to 'div'\n   */\n  elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n  const {\n    className,\n    children,\n    elementType: Component = \"div\",\n    ...otherProps\n  } = props;\n\n  return (\n    <Component\n      className={className}\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Component>\n  );\n}\n", "import type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n  elementType?:\n    | \"button\"\n    | \"a\"\n    | \"span\"\n    | \"input\"\n    | JSXElementConstructor<unknown>\n    | undefined;\n  type?: \"button\" | \"submit\" | \"reset\";\n  isDisabled?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  href?: string;\n  target?: string;\n  rel?: string;\n  role?: string;\n  name?: string | undefined;\n  value?: string | undefined;\n}\n\nexport function useButton({\n  elementType = \"button\",\n  type = \"button\",\n  isDisabled = false,\n  href,\n  target,\n  rel,\n  role,\n  name,\n  value,\n  onClick,\n  onPress,\n}: UseButtonProps) {\n  const realOnClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      onClick?.(event);\n      onPress?.(event);\n    },\n    [isDisabled, onClick, onPress],\n  );\n\n  function getRole() {\n    if (role) {\n      return role;\n    }\n\n    if (elementType === \"a\") {\n      return undefined;\n    }\n\n    return \"button\";\n  }\n\n  const extraProps =\n    elementType === \"button\"\n      ? { type }\n      : {\n          role: getRole(),\n        };\n\n  return {\n    buttonProps: {\n      href: elementType === \"a\" ? href : undefined,\n      target: elementType === \"a\" ? target : undefined,\n      rel: elementType === \"a\" ? rel : undefined,\n      tabIndex: isDisabled ? -1 : 0,\n      disabled: isDisabled || undefined,\n      \"aria-disabled\": isDisabled || undefined,\n      name:\n        elementType === \"input\" || elementType === \"button\" ? name : undefined,\n      value:\n        elementType === \"input\" || elementType === \"button\" ? value : undefined,\n      ...extraProps,\n      onClick: realOnClick,\n    },\n  };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n  <>\n    <div className=\"mobius-button__icon-wrapper\">\n      <Icon icon={tick} size=\"md\" />\n    </div>\n    <VisuallyHidden className=\"mobius-button__success-text\">\n      Success\n    </VisuallyHidden>\n  </>\n);\n\nexport { Success };\n", "import type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { cloneElement, isValidElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item = ({ ref, ...props }: ItemProps) => {\n  const {\n    elementType: Element = \"li\",\n    active,\n    onClick,\n    children,\n    ...otherProps\n  } = props;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-dropdown-menu__item\",\n    { \"--is-active\": active },\n    otherProps.className,\n  );\n\n  return (\n    <Element ref={ref} onClick={onClick} {...otherProps}>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          const childClasses = classNames(\n            (child.props as { className?: string }).className,\n            classes,\n          );\n          return cloneElement(\n            child as ReactElement,\n            {\n              className: childClasses,\n            } as { className: string },\n          );\n        }\n\n        return <span className={classes}>{child}</span>;\n      })}\n    </Element>\n  );\n};\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],
+  "mappings": "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",
+  "names": ["DropdownMenu", "import_react", "import_dedupe", "import_dedupe", "classNames", "import_jsx_runtime", "import_jsx_runtime", "import_icons", "import_jsx_runtime", "import_jsx_runtime", "classNames", "import_jsx_runtime", "useDropdownMenu", "classNames", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "DropdownMenu"]
+}