{"version":3,"file":"VerticalTransition.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/VerticalTransition.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactNode, useEffect, useState } from 'react';\n\nimport styles from './VerticalTransition.module.css';\n\n/**\n * Returns a state that automatically reset itself after a given number of seconds\n * @see {useCountdown} for an alternative that returns a countdown in seconds\n */\nexport function useTimedBoolean(timeoutSeconds: number) {\n  const [state, setState] = useState(false);\n\n  useEffect(() => {\n    if (!state || !timeoutSeconds) return;\n    const handler = setTimeout(() => setState(false), timeoutSeconds * 1000);\n    return () => clearTimeout(handler);\n  }, [state, timeoutSeconds]);\n  return [state, setState] as const;\n}\n\nexport type VerticalTransitionProps = {\n  primary: ReactNode;\n  secondary: ReactNode;\n\n  /** Customize the root class name. This element clips the two child */\n  rootClassName?: string;\n\n  /** Customize the two containers of primary and secondary */\n  className?: string;\n} & (\n  | {\n      /**\n       * Default. Rely on the triggered boolean to control whether primary or secondary is displayed.\n       * Has aria-live, and only one of primary and secondary has aria-hidden=\"false\"\n       */\n      trigger?: 'manual';\n\n      /**\n       * Primary is displayed if false, secondary if true\n       */\n      triggered: boolean;\n    }\n  | {\n      /**\n       * This element must be a child of a parent that has the hoverTriggerClass class attached.\n       * Both primary and secondary are always visible to screen readers\n       */\n      trigger: 'hover';\n\n      /** Can be used to override the hover trigger */\n      triggered?: boolean;\n    }\n);\n\nexport const hoverTriggerClass = styles.hoverTrigger;\n\n/**\n * Toggles between primary and secondary content by sliding vertically.\n *\n * The two provided elements are placed in containers which both share the same height\n * and width of primary's content.\n *\n * Use the trigger prop to set what toggles between primary and secondary:\n * - manual: Default. Rely on the triggered boolean to control whether primary or secondary is displayed.\n *           Has aria-live, and only one of primary and secondary has aria-hidden=\"false\"\n * - hover: This element must be a child of a parent that has the hoverTriggerClass class attached.\n *          Both primary and secondary are always visible to screen readers\n */\nconst VerticalTransition = ({\n  primary,\n  secondary,\n  rootClassName,\n  className,\n  trigger = 'manual',\n  triggered,\n}: VerticalTransitionProps) => (\n  <div\n    className={classNames(rootClassName, styles.container, {\n      [styles.triggered]: triggered,\n      [styles.canTriggerByHover]: trigger === 'hover',\n    })}\n    // The manually triggered version is an aria-live region since it is meant to replace toasts for ephemeral updates.\n    // The hover version is meant more for decorative elements, so we don't give it any special accessibility treatment\n    aria-live={trigger === 'manual' ? 'polite' : undefined}\n  >\n    <div className={classNames(className, styles.primary)} aria-hidden={trigger === 'manual' ? triggered : undefined}>\n      {primary}\n    </div>\n    <div\n      className={classNames(className, styles.secondary)}\n      aria-hidden={trigger === 'manual' ? !triggered : undefined}\n    >\n      {secondary}\n    </div>\n  </div>\n);\n\nexport default VerticalTransition;\n"],"names":["useTimedBoolean","timeoutSeconds","state","setState","useState","useEffect","handler","setTimeout","clearTimeout","hoverTriggerClass","styles","hoverTrigger","VerticalTransition","primary","secondary","rootClassName","className","trigger","triggered","React","div","classNames","container","canTriggerByHover","aria-live","undefined","aria-hidden"],"mappings":";;;;;AAKA;;;IAIO,SAASA,eAAAA,CAAgBC,cAAsB,EAAA;AACpD,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,CAAAA,CAAS,KAAA,CAAA;IAEnCC,CAAAA,CAAU,IAAA;QACR,IAAI,CAACH,KAAAA,IAAS,CAACD,cAAAA,EAAgB;AAC/B,QAAA,MAAMK,OAAAA,GAAUC,UAAAA,CAAW,IAAMJ,QAAAA,CAAS,QAAQF,cAAAA,GAAiB,IAAA,CAAA;AACnE,QAAA,OAAO,IAAMO,YAAAA,CAAaF,OAAAA,CAAAA;IAC5B,CAAA,EAAG;AAACJ,QAAAA,KAAAA;AAAOD,QAAAA;AAAe,KAAA,CAAA;IAC1B,OAAO;AAACC,QAAAA,KAAAA;AAAOC,QAAAA;AAAS,KAAA;AAC1B;AAoCO,MAAMM,iBAAAA,GAAoBC,gBAAAA,CAAOC;AAExC;;;;;;;;;;;AAWC,UACKC,kBAAAA,GAAqB,CAAC,EAC1BC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,SAAS,EACTC,OAAAA,GAAU,QAAQ,EAClBC,SAAS,EACe,iBACxBC,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;AACCJ,QAAAA,SAAAA,EAAWK,UAAAA,CAAWN,aAAAA,EAAeL,gBAAAA,CAAOY,SAAS,EAAE;YACrD,CAACZ,gBAAAA,CAAOQ,SAAS,GAAGA,SAAAA;AACpB,YAAA,CAACR,gBAAAA,CAAOa,iBAAiB,GAAGN,OAAAA,KAAY;AAC1C,SAAA,CAAA;;;QAGAO,WAAAA,EAAWP,OAAAA,KAAY,WAAW,QAAA,GAAWQ;qBAE7CN,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QAAIJ,SAAAA,EAAWK,UAAAA,CAAWL,SAAAA,EAAWN,gBAAAA,CAAOG,OAAO,CAAA;QAAGa,aAAAA,EAAaT,OAAAA,KAAY,WAAWC,SAAAA,GAAYO;AACpGZ,KAAAA,EAAAA,OAAAA,CAAAA,gBAEHM,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCJ,SAAAA,EAAWK,UAAAA,CAAWL,SAAAA,EAAWN,gBAAAA,CAAOI,SAAS,CAAA;QACjDY,aAAAA,EAAaT,OAAAA,KAAY,QAAA,GAAW,CAACC,SAAAA,GAAYO;AAEhDX,KAAAA,EAAAA,SAAAA,CAAAA;;;;"}