{"version":3,"file":"Action.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Action/Action.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentRef,\n  type ComponentProps,\n  useId,\n} from \"react\";\nimport styles from \"./Action.module.css\";\nimport { TextInput } from \"../Text\";\n\nimport { Control } from \"@radix-ui/react-form\";\nimport { Tooltip } from \"../../../Tooltip/Tooltip\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The React component to display on the right hand side of the icon.\n   */\n  Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n  /**\n   * On click callback for the icon on the right hand side\n   */\n  onActionClick: (e: React.MouseEvent) => void;\n  /**\n   * The name of the action to perform (e.g. \"Copy to clipboard\")\n   */\n  actionLabel: string;\n} & React.ComponentProps<typeof TextInput>;\n\n/**\n * A generic input with an action icon on the right hand side.\n * You should rarely use it directly,\n * but it is powering the likes of \"copy to clipboard input\", \"password reveal\", ...\n */\nexport const ActionInput = forwardRef<HTMLInputElement, Props>(\n  function ActionControl(\n    { Icon, className, actionLabel, onActionClick, ...props },\n    ref,\n  ) {\n    const id = useId();\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes} id={id}>\n        <TextInput ref={ref} {...props} className={styles.control} />\n\n        <Tooltip label={actionLabel}>\n          <button\n            type=\"button\"\n            className={styles.action}\n            onClick={onActionClick}\n            aria-controls={id}\n          >\n            <Icon aria-hidden />\n          </button>\n        </Tooltip>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ActionControl = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  ComponentProps<typeof ActionInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <ActionInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;AA4CA,IAAa,eAAA,GAAA,MAAA,YACX,SAAS,cACP,EAAE,MAAM,WAAW,aAAa,eAAe,GAAG,SAClD,KACA;CACA,MAAM,MAAA,GAAA,MAAA,QAAY;AAElB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAFoB,sBAAA,QAAO,WAAW,UAAU;EAExB;YAA7B,CACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,WAAD;GAAgB;GAAK,GAAI;GAAO,WAAW,sBAAA,QAAO;GAAW,CAAA,EAE7D,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;GAAS,OAAO;aACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,WAAW,sBAAA,QAAO;IAClB,SAAS;IACT,iBAAe;cAEf,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAM,eAAA,MAAc,CAAA;IACb,CAAA;GACD,CAAA,CACN;;EAGX;;;;AAKD,IAAa,iBAAA,GAAA,MAAA,YAGX,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,aAAD;GAAkB;GAAK,GAAI;GAAS,CAAA;EAC5B,CAAA;EAEZ"}