@pega/cosmos-react-core 3.0.0-dev.4.2 → 3.0.0-dev.7.0

package/lib/components/Toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useReducer,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  ReactNode,\n  CSSProperties,\n  TransitionEvent,\n  Context,\n  useRef,\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID } from '../../utils';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nregisterIcon(timesIcon);\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');\n\nexport interface ToasterContextValue {\n  push: (message: ToastMessage) => void;\n  [initializedKey]: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  [initializedKey]: false\n});\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: ToastState['id']; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n  /** Context to read previous values from. */\n  context?: Context<ToasterContextValue>;\n}\n\ninterface ToastState extends ToastMessage {\n  id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n  | { type: 'push'; payload: ToastState }\n  | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n  topLevelDismiss: ToasterProps['onDismiss'];\n  translateY: number;\n  dispatch: Dispatch<ToastReducerAction>;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledToastButton = styled.button(\n  ({ theme }) => css`\n    border: none;\n    color: inherit;\n    padding: 0;\n    font-size: 1rem;\n\n    &:enabled:hover {\n      background: #ffffff19;\n    }\n\n    &:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n  return css`\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${theme.base['font-size']};\n    margin-inline-start: calc(${theme.base['border-radius']} / 2);\n  `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    padding: calc(${theme.base.spacing} / 2);\n    background: ${theme.base.colors.slate['extra-dark']};\n    color: ${theme.base.colors.white};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    opacity: var(--opacity);\n    transform: translateY(var(--translateY)) scale(var(--scale));\n    transition-property: transform, opacity;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n  position: fixed;\n  z-index: ${({ theme }) => theme.base['z-index'].toast};\n  width: min(40ch, calc(100% - 1rem));\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n  switch (action.type) {\n    case 'push':\n      return [\n        ...current,\n        {\n          ...action.payload\n        }\n      ];\n\n    case 'unmount':\n      return current.filter(m => m.id !== action.payload);\n\n    default:\n      return current;\n  }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(\n  (\n    { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n    ref: ToastProps['ref']\n  ) => {\n    const { content, translateY } = message;\n    const [dismissed, setDismissed] = useState(false);\n    const timeoutRef = useRef(NaN);\n    const t = useI18n();\n\n    const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n        dispatch({ type: 'unmount', payload: message.id });\n      }\n    };\n\n    const dismiss = () => {\n      clearTimeout(timeoutRef.current);\n      if (dismissed) return;\n      setDismissed(true);\n      topLevelDismiss?.({ id: message.id, timeout: false });\n    };\n\n    useEffect(() => {\n      if (Number.isFinite(dismissAfter)) {\n        timeoutRef.current = setTimeout(dismiss, dismissAfter);\n      }\n\n      return () => {\n        clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.25 }}\n        as={StyledToast}\n        ref={ref}\n        style={\n          {\n            '--translateY': `${-translateY}px`,\n            '--opacity': dismissed ? '0' : '1',\n            '--scale': dismissed ? '0' : '1'\n          } as CSSProperties\n        }\n        onTransitionEnd={onTransitionEnd}\n      >\n        <Flex item={{ grow: 1 }} as={StyledToastContent}>\n          {content}\n        </Flex>\n        <Button\n          as={StyledToastButton}\n          variant='simple'\n          onClick={dismiss}\n          icon\n          aria-label={t('dismiss_label')}\n        >\n          <Icon name='times' />\n        </Button>\n      </Flex>\n    );\n  }\n);\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss,\n  context = ToasterContext\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n  const [messages, dispatch] = useReducer(reducer, []);\n  const [yOffsets, setYOffsets] = useState<number[]>([]);\n  const heightHashRef = useRef<{\n    [id: string]: number;\n  }>({});\n\n  // This effect will cause a re-render with a translateY value set for each toast.\n  useLayoutEffect(() => {\n    const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n    setYOffsets(\n      heights\n        .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n        .reverse()\n    );\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: ToastMessage) {\n        const message: ToastState = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        };\n\n        dispatch({\n          type: 'push',\n          payload: message\n        });\n      },\n      [initializedKey]: true\n    }),\n    [onDismiss, dismissAfter]\n  );\n\n  // Don't create additional ToasterContext.Providers.\n  const priorCtx = useContext(context);\n  if (priorCtx[initializedKey]) {\n    return <ToasterContext.Provider value={priorCtx}>{children}</ToasterContext.Provider>;\n  }\n\n  return (\n    <>\n      <ToasterContext.Provider value={providerValue}>{children}</ToasterContext.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map((message, i) => {\n              return (\n                <Toast\n                  {...message}\n                  translateY={yOffsets[i] ?? 0}\n                  topLevelDismiss={onDismiss}\n                  dismissAfter={message.dismissAfter ?? dismissAfter}\n                  key={message.id}\n                  dispatch={dispatch}\n                  ref={el => {\n                    if (el) {\n                      heightHashRef.current[message.id] = el.offsetHeight;\n                    } else {\n                      delete heightHashRef.current[message.id];\n                    }\n                  }}\n                />\n              );\n            })}\n          </StyledToaster>,\n          portalTarget\n        )}\n    </>\n  );\n};\n\nexport default Toaster;\n"]}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useReducer,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  ReactNode,\n  CSSProperties,\n  TransitionEvent,\n  Context,\n  useRef,\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID } from '../../utils';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nregisterIcon(timesIcon);\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');\n\nexport interface ToasterContextValue {\n  push: (message: ToastMessage) => void;\n  [initializedKey]: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  [initializedKey]: false\n});\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: ToastState['id']; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n  /** Context to read previous values from. */\n  context?: Context<ToasterContextValue>;\n}\n\ninterface ToastState extends ToastMessage {\n  id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n  | { type: 'push'; payload: ToastState }\n  | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n  topLevelDismiss: ToasterProps['onDismiss'];\n  translateY: number;\n  dispatch: Dispatch<ToastReducerAction>;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledToastButton = styled.button(\n  ({ theme }) => css`\n    border: none;\n    color: inherit;\n    padding: 0;\n    font-size: 1rem;\n\n    &:enabled:hover {\n      background: #ffffff19;\n    }\n\n    &:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n  return css`\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${theme.base['font-size']};\n    margin-inline-start: calc(${theme.base['border-radius']} / 2);\n  `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    padding: calc(${theme.base.spacing} / 2);\n    background: ${theme.base.colors.slate['extra-dark']};\n    color: ${theme.base.colors.white};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    opacity: var(--opacity);\n    transform: translateY(var(--translateY)) scale(var(--scale));\n    transition-property: transform, opacity;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n  position: fixed;\n  z-index: ${({ theme }) => theme.base['z-index'].toast};\n  width: min(40ch, calc(100% - 1rem));\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n  switch (action.type) {\n    case 'push':\n      return [\n        ...current,\n        {\n          ...action.payload\n        }\n      ];\n\n    case 'unmount':\n      return current.filter(m => m.id !== action.payload);\n\n    default:\n      return current;\n  }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(\n  (\n    { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n    ref: ToastProps['ref']\n  ) => {\n    const { content, translateY } = message;\n    const [dismissed, setDismissed] = useState(false);\n    const timeoutRef = useRef(NaN);\n    const t = useI18n();\n\n    const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n        dispatch({ type: 'unmount', payload: message.id });\n      }\n    };\n\n    const dismiss = () => {\n      clearTimeout(timeoutRef.current);\n      if (dismissed) return;\n      setDismissed(true);\n      topLevelDismiss?.({ id: message.id, timeout: false });\n    };\n\n    useEffect(() => {\n      if (Number.isFinite(dismissAfter)) {\n        timeoutRef.current = setTimeout(dismiss, dismissAfter);\n      }\n\n      return () => {\n        clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.25 }}\n        as={StyledToast}\n        ref={ref}\n        style={\n          {\n            '--translateY': `${-translateY}px`,\n            '--opacity': dismissed ? '0' : '1',\n            '--scale': dismissed ? '0' : '1'\n          } as CSSProperties\n        }\n        onTransitionEnd={onTransitionEnd}\n      >\n        <Flex item={{ grow: 1 }} as={StyledToastContent}>\n          {content}\n        </Flex>\n        <Button\n          as={StyledToastButton}\n          variant='simple'\n          onClick={dismiss}\n          icon\n          aria-label={t('dismiss_label')}\n        >\n          <Icon name='times' />\n        </Button>\n      </Flex>\n    );\n  }\n);\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss,\n  context = ToasterContext\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n  const [messages, dispatch] = useReducer(reducer, []);\n  const [yOffsets, setYOffsets] = useState<number[]>([]);\n  const heightHashRef = useRef<{\n    [id: string]: number;\n  }>({});\n\n  // This effect will cause a re-render with a translateY value set for each toast.\n  useLayoutEffect(() => {\n    const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n    setYOffsets(\n      heights\n        .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n        .reverse()\n    );\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: ToastMessage) {\n        const message: ToastState = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        };\n\n        dispatch({\n          type: 'push',\n          payload: message\n        });\n      },\n      [initializedKey]: true\n    }),\n    [onDismiss, dismissAfter]\n  );\n\n  // Don't create additional ToasterContext.Providers.\n  const priorCtx = useContext(context);\n  if (priorCtx[initializedKey]) {\n    return <ToasterContext.Provider value={priorCtx}>{children}</ToasterContext.Provider>;\n  }\n\n  return (\n    <>\n      <ToasterContext.Provider value={providerValue}>{children}</ToasterContext.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map((message, i) => {\n              return (\n                <Toast\n                  {...message}\n                  translateY={yOffsets[i] ?? 0}\n                  topLevelDismiss={onDismiss}\n                  dismissAfter={message.dismissAfter ?? dismissAfter}\n                  key={message.id}\n                  dispatch={dispatch}\n                  ref={el => {\n                    if (el) {\n                      heightHashRef.current[message.id] = el.offsetHeight;\n                    } else {\n                      delete heightHashRef.current[message.id];\n                    }\n                  }}\n                />\n              );\n            })}\n          </StyledToaster>,\n          portalTarget\n        )}\n    </>\n  );\n};\n\nexport default Toaster;\n"]}

package/lib/components/Tooltip/Tooltip.js

@@ -74,7 +74,7 @@ const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay =
             target.setAttribute('aria-describedby', id);
         }
     }, [describeTarget, target]);
-    return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: 'bottom', onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }, void 0));
+    return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: 'bottom', onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
 });
 export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n  /** Text content for the tooltip. */\n  children: string | string[];\n  /** Element to serve as the tooltip's target. */\n  target: Element | null;\n  /**\n   * Delay showing the tooltip on mouseenter.\n   * @default \"short\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay hiding the tooltip on mouseleave.\n   * @default \"long\"\n   */\n  hideDelay?: Delay;\n  /**\n   * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: PopoverProps['portal'];\n  /**\n   * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n   * @default true\n   */\n  describeTarget?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    background-color: ${theme.components.tooltip['background-color']};\n    color: ${theme.components.tooltip['foreground-color']};\n    font-size: ${fontSize.xxs};\n    max-width: 40ch;\n    padding: ${theme.base.spacing};\n    white-space: pre-line;\n    word-break: break-word;\n  `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      target,\n      showDelay = 'short',\n      hideDelay = 'long',\n      portal = false,\n      describeTarget = true,\n      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const tooltipRef = useConsolidatedRef(ref);\n    const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n    const showTooltip = useCallback(() => {\n      setShow(true);\n    }, []);\n\n    const onMouseDown = useCallback(\n      ({ target: eTarget }: MouseEvent) => {\n        lastClickedRef.current = eTarget;\n        if (eTarget === tooltipRef.current || eTarget === target) return;\n        setShow(false);\n      },\n      [target]\n    );\n\n    const onFocusOut = useCallback(() => {\n      if (lastClickedRef.current !== tooltipRef.current) {\n        setShow(false);\n      }\n      lastClickedRef.current = null;\n    }, []);\n\n    const onMouseEnter = useCallback(() => {\n      setShow(true);\n    }, [target]);\n\n    const onMouseLeave = useCallback(() => {\n      if (document.activeElement !== target) {\n        setShow(false);\n      }\n    }, [target]);\n\n    const onKeyDown = useCallback(\n      ({ key }: KeyboardEvent) => {\n        if (key === 'Escape' && document.activeElement === target) {\n          setShow(false);\n        }\n      },\n      [target]\n    );\n\n    useEffect(() => {\n      if (!target) return;\n\n      document.addEventListener('keydown', onKeyDown);\n      document.addEventListener('mousedown', onMouseDown);\n\n      target.addEventListener('focusin', showTooltip);\n      target.addEventListener('focusout', onFocusOut);\n\n      target.addEventListener('mouseenter', onMouseEnter);\n      target.addEventListener('mouseleave', onMouseLeave);\n\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n        document.removeEventListener('mousedown', onMouseDown);\n\n        target.removeEventListener('focusin', showTooltip);\n        target.removeEventListener('focusout', onFocusOut);\n\n        target.removeEventListener('mouseenter', onMouseEnter);\n        target.removeEventListener('mouseleave', onMouseLeave);\n      };\n    }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n    useEffect(() => {\n      if (target && !target.getAttribute('aria-describedby') && describeTarget) {\n        target.setAttribute('aria-describedby', id);\n      }\n    }, [describeTarget, target]);\n\n    return (\n      <Popover\n        id={id}\n        {...restProps}\n        show={show}\n        showDelay={showDelay}\n        hideDelay={hideDelay}\n        groupId='tooltip'\n        strategy='fixed'\n        portal={portal}\n        as={StyledTooltip}\n        role='tooltip'\n        target={target}\n        arrow\n        placement='bottom'\n        onMouseDown={onMouseDown}\n        hideOnTargetHidden\n        ref={tooltipRef}\n      >\n        {children}\n      </Popover>\n    );\n  }\n);\n\nexport default Tooltip;\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n  /** Text content for the tooltip. */\n  children: string | string[];\n  /** Element to serve as the tooltip's target. */\n  target: Element | null;\n  /**\n   * Delay showing the tooltip on mouseenter.\n   * @default \"short\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay hiding the tooltip on mouseleave.\n   * @default \"long\"\n   */\n  hideDelay?: Delay;\n  /**\n   * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: PopoverProps['portal'];\n  /**\n   * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n   * @default true\n   */\n  describeTarget?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    background-color: ${theme.components.tooltip['background-color']};\n    color: ${theme.components.tooltip['foreground-color']};\n    font-size: ${fontSize.xxs};\n    max-width: 40ch;\n    padding: ${theme.base.spacing};\n    white-space: pre-line;\n    word-break: break-word;\n  `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      target,\n      showDelay = 'short',\n      hideDelay = 'long',\n      portal = false,\n      describeTarget = true,\n      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const tooltipRef = useConsolidatedRef(ref);\n    const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n    const showTooltip = useCallback(() => {\n      setShow(true);\n    }, []);\n\n    const onMouseDown = useCallback(\n      ({ target: eTarget }: MouseEvent) => {\n        lastClickedRef.current = eTarget;\n        if (eTarget === tooltipRef.current || eTarget === target) return;\n        setShow(false);\n      },\n      [target]\n    );\n\n    const onFocusOut = useCallback(() => {\n      if (lastClickedRef.current !== tooltipRef.current) {\n        setShow(false);\n      }\n      lastClickedRef.current = null;\n    }, []);\n\n    const onMouseEnter = useCallback(() => {\n      setShow(true);\n    }, [target]);\n\n    const onMouseLeave = useCallback(() => {\n      if (document.activeElement !== target) {\n        setShow(false);\n      }\n    }, [target]);\n\n    const onKeyDown = useCallback(\n      ({ key }: KeyboardEvent) => {\n        if (key === 'Escape' && document.activeElement === target) {\n          setShow(false);\n        }\n      },\n      [target]\n    );\n\n    useEffect(() => {\n      if (!target) return;\n\n      document.addEventListener('keydown', onKeyDown);\n      document.addEventListener('mousedown', onMouseDown);\n\n      target.addEventListener('focusin', showTooltip);\n      target.addEventListener('focusout', onFocusOut);\n\n      target.addEventListener('mouseenter', onMouseEnter);\n      target.addEventListener('mouseleave', onMouseLeave);\n\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n        document.removeEventListener('mousedown', onMouseDown);\n\n        target.removeEventListener('focusin', showTooltip);\n        target.removeEventListener('focusout', onFocusOut);\n\n        target.removeEventListener('mouseenter', onMouseEnter);\n        target.removeEventListener('mouseleave', onMouseLeave);\n      };\n    }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n    useEffect(() => {\n      if (target && !target.getAttribute('aria-describedby') && describeTarget) {\n        target.setAttribute('aria-describedby', id);\n      }\n    }, [describeTarget, target]);\n\n    return (\n      <Popover\n        id={id}\n        {...restProps}\n        show={show}\n        showDelay={showDelay}\n        hideDelay={hideDelay}\n        groupId='tooltip'\n        strategy='fixed'\n        portal={portal}\n        as={StyledTooltip}\n        role='tooltip'\n        target={target}\n        arrow\n        placement='bottom'\n        onMouseDown={onMouseDown}\n        hideOnTargetHidden\n        ref={tooltipRef}\n      >\n        {children}\n      </Popover>\n    );\n  }\n);\n\nexport default Tooltip;\n"]}

package/lib/components/Tree/StandardTree.js

@@ -99,17 +99,17 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
                             action?.onClick?.(actionId, e);
                         }
                     };
-                }), menuAt: 3 }, void 0) }, void 0)) : null;
+                }), menuAt: 3 }) })) : null;
     }, [actions]);
     const labelContent = useMemo(() => {
         const internal = (
         // Wrapping in a div for handling of flex space-between when there are node actions.
-        _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledLabelContent, children: [icon && _jsx(StyledNodeIcon, { name: icon }, void 0), _jsx(StyledNodeText, { children: label }, void 0)] }, void 0));
+        _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledLabelContent, children: [icon && _jsx(StyledNodeIcon, { name: icon }), _jsx(StyledNodeText, { children: label })] }));
         return !nodes && (onClick ?? onNodeClick) ? (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledNodeInteraction, role: 'treeitem', "aria-current": current ? 'true' : undefined, tabIndex: tabIndex, onClick: (e) => {
                 onClick?.(id, e);
                 onNodeClick?.(id, e);
                 changeFocusedNodeId(id);
-            }, onKeyDown: onKeyDown, ref: focusedEl ? (focusedRef) => focusedRef?.focus() : undefined, children: [internal, actionsJSX] }, void 0)) : (internal);
+            }, onKeyDown: onKeyDown, ref: focusedEl ? (focusedRef) => focusedRef?.focus() : undefined, children: [internal, actionsJSX] })) : (internal);
     }, [
         id,
         label,
@@ -124,7 +124,7 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
         changeFocusedNodeId,
         onKeyDown
     ]);
-    return (_jsx(StyledStandardTreeNode, { id: id, style: { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) }, "aria-busy": loading, children: nodes ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledStandardTreeParent, role: 'treeitem', "aria-current": current ? 'true' : undefined, tabIndex: tabIndex, variant: 'text', onClick: handleToggleClick, "aria-expanded": expanded ? 'true' : 'false', "aria-label": t(expanded ? 'collapse_noun' : 'expand_noun', [label]), onKeyDown: onKeyDown, ref: focusedEl ? (focusedElRef) => focusedElRef?.focus() : undefined, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(StyledToggleIcon, { name: 'caret-right' }, void 0), labelContent] }, void 0), actionsJSX] }, void 0), _jsxs(StyledStandardTreeItemSubTree, { lined: lined, children: [subTree, loading && _jsx(Progress, { variant: 'ring', placement: 'inline' }, void 0)] }, void 0)] }, void 0)) : (_jsx(StyledStandardTreeLeaf, { children: labelContent }, void 0)) }, void 0));
+    return (_jsx(StyledStandardTreeNode, { id: id, style: { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) }, "aria-busy": loading, children: nodes ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledStandardTreeParent, role: 'treeitem', "aria-current": current ? 'true' : undefined, tabIndex: tabIndex, variant: 'text', onClick: handleToggleClick, "aria-expanded": expanded ? 'true' : 'false', "aria-label": t(expanded ? 'collapse_noun' : 'expand_noun', [label]), onKeyDown: onKeyDown, ref: focusedEl ? (focusedElRef) => focusedElRef?.focus() : undefined, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(StyledToggleIcon, { name: 'caret-right' }), labelContent] }), actionsJSX] }), _jsxs(StyledStandardTreeItemSubTree, { lined: lined, children: [subTree, loading && _jsx(Progress, { variant: 'ring', placement: 'inline' })] })] })) : (_jsx(StyledStandardTreeLeaf, { children: labelContent })) }));
 };
 const StandardTreeWithNodes = forwardRef(({ nodes, currentNodeId, onNodeClick, lined = false, ...restProps }, ref) => {
     const [focusedNodeId, setFocusedNodedId] = useState();
@@ -169,10 +169,10 @@ const StandardTreeWithNodes = forwardRef(({ nodes, currentNodeId, onNodeClick, l
             changeFocusedNodeId,
             onNodeClick,
             lined
-        }), [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId]), children: _jsx(StyledStandardTree, { ...restProps, ref: ref, nodes: nodes, nodeRenderer: NodeRenderer }, void 0) }, void 0));
+        }), [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId]), children: _jsx(StyledStandardTree, { ...restProps, ref: ref, nodes: nodes, nodeRenderer: NodeRenderer }) }));
 });
 const StandardTree = forwardRef((props, ref) => {
-    return props.nodes.length > 0 ? _jsx(StandardTreeWithNodes, { ...props, ref: ref }, void 0) : null;
+    return props.nodes.length > 0 ? _jsx(StandardTreeWithNodes, { ...props, ref: ref }) : null;
 });
 export default StandardTree;
 //# sourceMappingURL=StandardTree.js.map

package/lib/components/Tree/StandardTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardTree.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,WAAW,EACX,QAAQ,EAET,MAAM,OAAO,CAAC;AAGf,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,wBAAwB,EACxB,gBAAgB,EAChB,6BAA6B,EAC7B,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACf,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,MAAM,mBAAmB,GAAG,aAAa,CAWvC;IACA,aAAa,EAAE,SAAS;IACxB,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;IACxB,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC9B,CAAC,CAAC;AAEH,MAAM,YAAY,GAAgD,CAAC,EACjE,EAAE,EACF,KAAK,EACL,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,OAAO,EACP,OAAO,EACR,EAAE,EAAE;IACH,MAAM,EACJ,aAAa,EACb,WAAW,EACX,KAAK,EACL,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,UAAU,EACX,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,aAAa,KAAK,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,aAAa,KAAK,EAAE,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,KAAK,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;QACf,IAAI,aAAa,EAAE;YACjB,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5B;aAAM,IAAI,aAAa,EAAE;YACxB,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;aAAM;YACL,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5B;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvD,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAuD,EAAE,EAAE;QAC1D,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACrB,mBAAmB,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,EAAE,EAAE,WAAW,EAAE,mBAAmB,CAAC,CACvC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAA6B,EAAE,EAAE;QAChC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QACzF,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS;gBACZ,mBAAmB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;gBAC9B,MAAM;YACR,KAAK,WAAW;gBACd,mBAAmB,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;gBAChC,MAAM;YACR,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;gBACrB,IAAI,KAAK,EAAE;oBACT,IAAI,QAAQ,EAAE;wBACZ,mBAAmB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;qBAClC;yBAAM;wBACL,iBAAiB,CAAC,CAAC,CAAC,CAAC;qBACtB;iBACF;gBACD,MAAM;YACR,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE;gBACvB,IAAI,QAAQ,EAAE;oBACZ,iBAAiB,CAAC,CAAC,CAAC,CAAC;iBACtB;qBAAM;oBACL,mBAAmB,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;iBACjC;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,OAAO,EAAE;oBACX,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;iBAChB;qBAAM;oBACL,iBAAiB,CAAC,CAAC,CAAC,CAAC;iBACtB;gBACD,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,WAAW;oBAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,UAAU;oBAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;gBAChD,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAClF,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,OAAO,CAAC,CAAC,CAAC;QACf,6GAA6G;QAC7G,KAAC,iBAAiB,cAChB,KAAC,OAAO,IACN,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;oBAC1B,OAAO;wBACL,GAAG,MAAM;wBACT,QAAQ,EAAE,CAAC,CAAC;wBACZ,OAAO,EAAE,CACP,QAAsB,EACtB,CAAuE,EACvE,EAAE;4BACF,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,MAAM,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;wBACjC,CAAC;qBACF,CAAC;gBACJ,CAAC,CAAC,EACF,MAAM,EAAE,CAAC,WACT,WACgB,CACrB,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,QAAQ,GAAG;QACf,oFAAoF;QACpF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,kBAAkB,aACxE,IAAI,IAAI,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,WAAI,EACvC,KAAC,cAAc,cAAE,KAAK,WAAkB,YACnC,CACR,CAAC;QAEF,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAC1C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,EAAE,EAAE,qBAAqB,EACzB,IAAI,EAAC,UAAU,kBACD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAA0B,EAAE,EAAE;gBACtC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACjB,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACrB,mBAAmB,CAAC,EAAE,CAAC,CAAC;YAC1B,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAA0B,EAAE,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,aAE/E,QAAQ,EACR,UAAU,YACN,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IACJ,CAAC,EAAE;QACD,EAAE;QACF,KAAK;QACL,IAAI;QACJ,KAAK;QACL,OAAO;QACP,OAAO;QACP,WAAW;QACX,OAAO;QACP,SAAS;QACT,QAAQ;QACR,mBAAmB;QACnB,SAAS;KACV,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,sBAAsB,IACrB,EAAE,EAAE,EAAE,EACN,KAAK,EACH,EAAE,SAAS,EAAE,KAAK,EAAE,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAmB,eAE9E,OAAO,YAEjB,KAAK,CAAC,CAAC,CAAC,CACP,8BACE,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,EAAE,EAAE,wBAAwB,EAC5B,IAAI,EAAC,UAAU,kBACD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,iBAAiB,mBACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC9B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC,EAClE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,YAA4B,EAAE,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,aAEpF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,MAAM,aAC1D,KAAC,gBAAgB,IAAC,IAAI,EAAC,aAAa,WAAG,EACtC,YAAY,YACR,EACN,UAAU,YACN,EACP,MAAC,6BAA6B,IAAC,KAAK,EAAE,KAAK,aACxC,OAAO,EACP,OAAO,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,WAAG,YAC5B,YAC/B,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,cAAE,YAAY,WAA0B,CAChE,WACsB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAwD,UAAU,CAC3F,CACE,EACE,KAAK,EACL,aAAa,EACb,WAAW,EACX,KAAK,GAAG,KAAK,EACb,GAAG,SAAS,EACuB,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE1E,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,mBAAmB,GAAoD,WAAW,CACtF,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;QACX,QAAQ,IAAI,EAAE;YACZ,KAAK,IAAI,CAAC,CAAC;gBACT,MAAM,YAAY,GAAG,OAAO,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACxD,IAAI,YAAY;oBAAE,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;gBACrD,MAAM;aACP;YACD,KAAK,MAAM,CAAC,CAAC;gBACX,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBAChD,IAAI,QAAQ;oBAAE,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBAC7C,MAAM;aACP;YACD,KAAK,MAAM,CAAC,CAAC;gBACX,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACpD,IAAI,UAAU;oBAAE,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;gBACjD,MAAM;aACP;YACD,KAAK,OAAO,CAAC,CAAC;gBACZ,MAAM,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACvD,IAAI,SAAS;oBAAE,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;gBAC/C,MAAM;aACP;YACD;gBACE,iBAAiB,CAAC,EAAE,CAAC,CAAC;SACzB;IACH,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,aAAa;YACb,aAAa;YACb,UAAU;YACV,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;YACxB,mBAAmB;YACnB,WAAW;YACX,KAAK;SACN,CAAC,EACF,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,CAAC,CAC/D,YAGD,KAAC,kBAAkB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,WAAI,WAC5D,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAwD,UAAU,CAClF,CAAC,KAAyC,EAAE,GAA6B,EAAE,EAAE;IAC3E,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,qBAAqB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,WAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACxF,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  createContext,\n  useMemo,\n  useContext,\n  useCallback,\n  useState,\n  KeyboardEvent\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, MouseEvent } from 'react';\n\nimport Progress from '../Progress';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Actions from '../Actions';\nimport type { Action, ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport {\n  StyledStandardTreeParent,\n  StyledToggleIcon,\n  StyledStandardTreeItemSubTree,\n  StyledStandardTreeLeaf,\n  StyledStandardTree,\n  StyledNodeInteraction,\n  StyledStandardTreeNode,\n  StyledNodeActions,\n  StyledLabelContent,\n  StyledNodeIcon,\n  StyledNodeText\n} from './StandardTree.styles';\nimport type { TreeProps } from './Tree';\nimport type {\n  StandardTreeContextProps,\n  StandardTreeNode,\n  StandardTreeProps,\n  StandardTreePropsWithDefaults\n} from './StandardTree.types';\nimport helpers from './helpers';\n\nconst StandardTreeContext = createContext<\n  Pick<\n    StandardTreePropsWithDefaults,\n    | 'currentNodeId'\n    | 'lined'\n    | 'onNodeClick'\n    | 'firstNodeId'\n    | 'lastNodeId'\n    | 'focusedNodeId'\n    | 'changeFocusedNodeId'\n  >\n>({\n  currentNodeId: undefined,\n  lined: false,\n  onNodeClick: () => {},\n  firstNodeId: undefined,\n  lastNodeId: undefined,\n  focusedNodeId: undefined,\n  changeFocusedNodeId: () => {}\n});\n\nconst NodeRenderer: TreeProps<StandardTreeNode>['nodeRenderer'] = ({\n  id,\n  label,\n  icon,\n  depth,\n  hasParentSibling,\n  nodes,\n  expanded = false,\n  loading = false,\n  subTree,\n  actions,\n  onClick\n}) => {\n  const {\n    currentNodeId,\n    onNodeClick,\n    lined,\n    focusedNodeId,\n    changeFocusedNodeId,\n    firstNodeId,\n    lastNodeId\n  } = useContext(StandardTreeContext);\n  const current = currentNodeId === id;\n  const focusedEl = focusedNodeId === id;\n  const firstNode = firstNodeId === id;\n  const { start, end } = useDirection();\n  const t = useI18n();\n\n  const tabIndex = useMemo(() => {\n    let index = -1;\n    if (focusedNodeId) {\n      index = focusedEl ? 0 : -1;\n    } else if (currentNodeId) {\n      index = current ? 0 : -1;\n    } else {\n      index = firstNode ? 0 : -1;\n    }\n    return index;\n  }, [focusedNodeId, currentNodeId, current, focusedEl]);\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      onNodeClick?.(id, e);\n      changeFocusedNodeId(id);\n    },\n    [id, onNodeClick, changeFocusedNodeId]\n  );\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      if (['ArrowUp', 'ArrowDown', 'Enter', 'Home', 'End'].includes(e.key)) e.preventDefault();\n      switch (e.key) {\n        case 'ArrowUp':\n          changeFocusedNodeId(id, 'up');\n          break;\n        case 'ArrowDown':\n          changeFocusedNodeId(id, 'down');\n          break;\n        case `Arrow${cap(end)}`:\n          if (nodes) {\n            if (expanded) {\n              changeFocusedNodeId(id, 'right');\n            } else {\n              handleToggleClick(e);\n            }\n          }\n          break;\n        case `Arrow${cap(start)}`:\n          if (expanded) {\n            handleToggleClick(e);\n          } else {\n            changeFocusedNodeId(id, 'left');\n          }\n          break;\n        case 'Enter':\n          if (onClick) {\n            onClick(id, e);\n          } else {\n            handleToggleClick(e);\n          }\n          break;\n        case 'Home':\n          if (firstNodeId) changeFocusedNodeId(firstNodeId);\n          break;\n        case 'End':\n          if (lastNodeId) changeFocusedNodeId(lastNodeId);\n          break;\n        default:\n      }\n    },\n    [id, end, nodes, expanded, actions, firstNodeId, lastNodeId, changeFocusedNodeId]\n  );\n\n  const actionsJSX = useMemo(() => {\n    return actions ? (\n      // Wrapping in a div since Actions may render a frag of buttons and we need a wrapper for flex space-between.\n      <StyledNodeActions>\n        <Actions\n          items={actions.map(action => {\n            return {\n              ...action,\n              tabIndex: -1,\n              onClick: (\n                actionId: Action['id'],\n                e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n              ) => {\n                e.stopPropagation();\n                action?.onClick?.(actionId, e);\n              }\n            };\n          })}\n          menuAt={3}\n        />\n      </StyledNodeActions>\n    ) : null;\n  }, [actions]);\n\n  const labelContent = useMemo(() => {\n    const internal = (\n      // Wrapping in a div for handling of flex space-between when there are node actions.\n      <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledLabelContent}>\n        {icon && <StyledNodeIcon name={icon} />}\n        <StyledNodeText>{label}</StyledNodeText>\n      </Flex>\n    );\n\n    return !nodes && (onClick ?? onNodeClick) ? (\n      <Flex\n        container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n        as={StyledNodeInteraction}\n        role='treeitem'\n        aria-current={current ? 'true' : undefined}\n        tabIndex={tabIndex}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          onClick?.(id, e);\n          onNodeClick?.(id, e);\n          changeFocusedNodeId(id);\n        }}\n        onKeyDown={onKeyDown}\n        ref={focusedEl ? (focusedRef: HTMLDivElement) => focusedRef?.focus() : undefined}\n      >\n        {internal}\n        {actionsJSX}\n      </Flex>\n    ) : (\n      internal\n    );\n  }, [\n    id,\n    label,\n    icon,\n    nodes,\n    actions,\n    onClick,\n    onNodeClick,\n    current,\n    focusedEl,\n    tabIndex,\n    changeFocusedNodeId,\n    onKeyDown\n  ]);\n\n  return (\n    <StyledStandardTreeNode\n      id={id}\n      style={\n        { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) } as CSSProperties\n      }\n      aria-busy={loading}\n    >\n      {nodes ? (\n        <>\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n            as={StyledStandardTreeParent}\n            role='treeitem'\n            aria-current={current ? 'true' : undefined}\n            tabIndex={tabIndex}\n            variant='text'\n            onClick={handleToggleClick}\n            aria-expanded={expanded ? 'true' : 'false'}\n            aria-label={t(expanded ? 'collapse_noun' : 'expand_noun', [label])}\n            onKeyDown={onKeyDown}\n            ref={focusedEl ? (focusedElRef: HTMLDivElement) => focusedElRef?.focus() : undefined}\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n              <StyledToggleIcon name='caret-right' />\n              {labelContent}\n            </Flex>\n            {actionsJSX}\n          </Flex>\n          <StyledStandardTreeItemSubTree lined={lined}>\n            {subTree}\n            {loading && <Progress variant='ring' placement='inline' />}\n          </StyledStandardTreeItemSubTree>\n        </>\n      ) : (\n        <StyledStandardTreeLeaf>{labelContent}</StyledStandardTreeLeaf>\n      )}\n    </StyledStandardTreeNode>\n  );\n};\n\nconst StandardTreeWithNodes: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n  (\n    {\n      nodes,\n      currentNodeId,\n      onNodeClick,\n      lined = false,\n      ...restProps\n    }: PropsWithoutRef<StandardTreeProps>,\n    ref: StandardTreeProps['ref']\n  ) => {\n    const [focusedNodeId, setFocusedNodedId] = useState<string | undefined>();\n\n    const lastNodeId = useMemo(() => {\n      return helpers.getDeepestNode(nodes, nodes[nodes.length - 1].id)?.id;\n    }, [nodes]);\n\n    const changeFocusedNodeId: StandardTreeContextProps['changeFocusedNodeId'] = useCallback(\n      (id, type) => {\n        switch (type) {\n          case 'up': {\n            const previousNode = helpers.getPreviousNode(nodes, id);\n            if (previousNode) setFocusedNodedId(previousNode.id);\n            break;\n          }\n          case 'down': {\n            const nextNode = helpers.getNextNode(nodes, id);\n            if (nextNode) setFocusedNodedId(nextNode.id);\n            break;\n          }\n          case 'left': {\n            const parentNode = helpers.getParentNode(nodes, id);\n            if (parentNode) setFocusedNodedId(parentNode.id);\n            break;\n          }\n          case 'right': {\n            const childNode = helpers.getFirstChildNode(nodes, id);\n            if (childNode) setFocusedNodedId(childNode.id);\n            break;\n          }\n          default:\n            setFocusedNodedId(id);\n        }\n      },\n      [nodes]\n    );\n\n    return (\n      <StandardTreeContext.Provider\n        value={useMemo(\n          () => ({\n            currentNodeId,\n            focusedNodeId,\n            lastNodeId,\n            firstNodeId: nodes[0].id,\n            changeFocusedNodeId,\n            onNodeClick,\n            lined\n          }),\n          [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId]\n        )}\n      >\n        {/* FIXME: Types are having issues when styled(Tree) is typeof Tree. */}\n        <StyledStandardTree {...restProps} ref={ref} nodes={nodes} nodeRenderer={NodeRenderer} />\n      </StandardTreeContext.Provider>\n    );\n  }\n);\n\nconst StandardTree: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<StandardTreeProps>, ref: StandardTreeProps['ref']) => {\n    return props.nodes.length > 0 ? <StandardTreeWithNodes {...props} ref={ref} /> : null;\n  }\n);\n\nexport default StandardTree;\n"]}
+{"version":3,"file":"StandardTree.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  createContext,\n  useMemo,\n  useContext,\n  useCallback,\n  useState,\n  KeyboardEvent\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, MouseEvent } from 'react';\n\nimport Progress from '../Progress';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Actions from '../Actions';\nimport type { Action, ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport {\n  StyledStandardTreeParent,\n  StyledToggleIcon,\n  StyledStandardTreeItemSubTree,\n  StyledStandardTreeLeaf,\n  StyledStandardTree,\n  StyledNodeInteraction,\n  StyledStandardTreeNode,\n  StyledNodeActions,\n  StyledLabelContent,\n  StyledNodeIcon,\n  StyledNodeText\n} from './StandardTree.styles';\nimport type { TreeProps } from './Tree';\nimport type {\n  StandardTreeContextProps,\n  StandardTreeNode,\n  StandardTreeProps,\n  StandardTreePropsWithDefaults\n} from './StandardTree.types';\nimport helpers from './helpers';\n\nconst StandardTreeContext = createContext<\n  Pick<\n    StandardTreePropsWithDefaults,\n    | 'currentNodeId'\n    | 'lined'\n    | 'onNodeClick'\n    | 'firstNodeId'\n    | 'lastNodeId'\n    | 'focusedNodeId'\n    | 'changeFocusedNodeId'\n  >\n>({\n  currentNodeId: undefined,\n  lined: false,\n  onNodeClick: () => {},\n  firstNodeId: undefined,\n  lastNodeId: undefined,\n  focusedNodeId: undefined,\n  changeFocusedNodeId: () => {}\n});\n\nconst NodeRenderer: TreeProps<StandardTreeNode>['nodeRenderer'] = ({\n  id,\n  label,\n  icon,\n  depth,\n  hasParentSibling,\n  nodes,\n  expanded = false,\n  loading = false,\n  subTree,\n  actions,\n  onClick\n}) => {\n  const {\n    currentNodeId,\n    onNodeClick,\n    lined,\n    focusedNodeId,\n    changeFocusedNodeId,\n    firstNodeId,\n    lastNodeId\n  } = useContext(StandardTreeContext);\n  const current = currentNodeId === id;\n  const focusedEl = focusedNodeId === id;\n  const firstNode = firstNodeId === id;\n  const { start, end } = useDirection();\n  const t = useI18n();\n\n  const tabIndex = useMemo(() => {\n    let index = -1;\n    if (focusedNodeId) {\n      index = focusedEl ? 0 : -1;\n    } else if (currentNodeId) {\n      index = current ? 0 : -1;\n    } else {\n      index = firstNode ? 0 : -1;\n    }\n    return index;\n  }, [focusedNodeId, currentNodeId, current, focusedEl]);\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      onNodeClick?.(id, e);\n      changeFocusedNodeId(id);\n    },\n    [id, onNodeClick, changeFocusedNodeId]\n  );\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      if (['ArrowUp', 'ArrowDown', 'Enter', 'Home', 'End'].includes(e.key)) e.preventDefault();\n      switch (e.key) {\n        case 'ArrowUp':\n          changeFocusedNodeId(id, 'up');\n          break;\n        case 'ArrowDown':\n          changeFocusedNodeId(id, 'down');\n          break;\n        case `Arrow${cap(end)}`:\n          if (nodes) {\n            if (expanded) {\n              changeFocusedNodeId(id, 'right');\n            } else {\n              handleToggleClick(e);\n            }\n          }\n          break;\n        case `Arrow${cap(start)}`:\n          if (expanded) {\n            handleToggleClick(e);\n          } else {\n            changeFocusedNodeId(id, 'left');\n          }\n          break;\n        case 'Enter':\n          if (onClick) {\n            onClick(id, e);\n          } else {\n            handleToggleClick(e);\n          }\n          break;\n        case 'Home':\n          if (firstNodeId) changeFocusedNodeId(firstNodeId);\n          break;\n        case 'End':\n          if (lastNodeId) changeFocusedNodeId(lastNodeId);\n          break;\n        default:\n      }\n    },\n    [id, end, nodes, expanded, actions, firstNodeId, lastNodeId, changeFocusedNodeId]\n  );\n\n  const actionsJSX = useMemo(() => {\n    return actions ? (\n      // Wrapping in a div since Actions may render a frag of buttons and we need a wrapper for flex space-between.\n      <StyledNodeActions>\n        <Actions\n          items={actions.map(action => {\n            return {\n              ...action,\n              tabIndex: -1,\n              onClick: (\n                actionId: Action['id'],\n                e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n              ) => {\n                e.stopPropagation();\n                action?.onClick?.(actionId, e);\n              }\n            };\n          })}\n          menuAt={3}\n        />\n      </StyledNodeActions>\n    ) : null;\n  }, [actions]);\n\n  const labelContent = useMemo(() => {\n    const internal = (\n      // Wrapping in a div for handling of flex space-between when there are node actions.\n      <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledLabelContent}>\n        {icon && <StyledNodeIcon name={icon} />}\n        <StyledNodeText>{label}</StyledNodeText>\n      </Flex>\n    );\n\n    return !nodes && (onClick ?? onNodeClick) ? (\n      <Flex\n        container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n        as={StyledNodeInteraction}\n        role='treeitem'\n        aria-current={current ? 'true' : undefined}\n        tabIndex={tabIndex}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          onClick?.(id, e);\n          onNodeClick?.(id, e);\n          changeFocusedNodeId(id);\n        }}\n        onKeyDown={onKeyDown}\n        ref={focusedEl ? (focusedRef: HTMLDivElement) => focusedRef?.focus() : undefined}\n      >\n        {internal}\n        {actionsJSX}\n      </Flex>\n    ) : (\n      internal\n    );\n  }, [\n    id,\n    label,\n    icon,\n    nodes,\n    actions,\n    onClick,\n    onNodeClick,\n    current,\n    focusedEl,\n    tabIndex,\n    changeFocusedNodeId,\n    onKeyDown\n  ]);\n\n  return (\n    <StyledStandardTreeNode\n      id={id}\n      style={\n        { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) } as CSSProperties\n      }\n      aria-busy={loading}\n    >\n      {nodes ? (\n        <>\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n            as={StyledStandardTreeParent}\n            role='treeitem'\n            aria-current={current ? 'true' : undefined}\n            tabIndex={tabIndex}\n            variant='text'\n            onClick={handleToggleClick}\n            aria-expanded={expanded ? 'true' : 'false'}\n            aria-label={t(expanded ? 'collapse_noun' : 'expand_noun', [label])}\n            onKeyDown={onKeyDown}\n            ref={focusedEl ? (focusedElRef: HTMLDivElement) => focusedElRef?.focus() : undefined}\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n              <StyledToggleIcon name='caret-right' />\n              {labelContent}\n            </Flex>\n            {actionsJSX}\n          </Flex>\n          <StyledStandardTreeItemSubTree lined={lined}>\n            {subTree}\n            {loading && <Progress variant='ring' placement='inline' />}\n          </StyledStandardTreeItemSubTree>\n        </>\n      ) : (\n        <StyledStandardTreeLeaf>{labelContent}</StyledStandardTreeLeaf>\n      )}\n    </StyledStandardTreeNode>\n  );\n};\n\nconst StandardTreeWithNodes: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n  (\n    {\n      nodes,\n      currentNodeId,\n      onNodeClick,\n      lined = false,\n      ...restProps\n    }: PropsWithoutRef<StandardTreeProps>,\n    ref: StandardTreeProps['ref']\n  ) => {\n    const [focusedNodeId, setFocusedNodedId] = useState<string | undefined>();\n\n    const lastNodeId = useMemo(() => {\n      return helpers.getDeepestNode(nodes, nodes[nodes.length - 1].id)?.id;\n    }, [nodes]);\n\n    const changeFocusedNodeId: StandardTreeContextProps['changeFocusedNodeId'] = useCallback(\n      (id, type) => {\n        switch (type) {\n          case 'up': {\n            const previousNode = helpers.getPreviousNode(nodes, id);\n            if (previousNode) setFocusedNodedId(previousNode.id);\n            break;\n          }\n          case 'down': {\n            const nextNode = helpers.getNextNode(nodes, id);\n            if (nextNode) setFocusedNodedId(nextNode.id);\n            break;\n          }\n          case 'left': {\n            const parentNode = helpers.getParentNode(nodes, id);\n            if (parentNode) setFocusedNodedId(parentNode.id);\n            break;\n          }\n          case 'right': {\n            const childNode = helpers.getFirstChildNode(nodes, id);\n            if (childNode) setFocusedNodedId(childNode.id);\n            break;\n          }\n          default:\n            setFocusedNodedId(id);\n        }\n      },\n      [nodes]\n    );\n\n    return (\n      <StandardTreeContext.Provider\n        value={useMemo(\n          () => ({\n            currentNodeId,\n            focusedNodeId,\n            lastNodeId,\n            firstNodeId: nodes[0].id,\n            changeFocusedNodeId,\n            onNodeClick,\n            lined\n          }),\n          [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId]\n        )}\n      >\n        {/* FIXME: Types are having issues when styled(Tree) is typeof Tree. */}\n        <StyledStandardTree {...restProps} ref={ref} nodes={nodes} nodeRenderer={NodeRenderer} />\n      </StandardTreeContext.Provider>\n    );\n  }\n);\n\nconst StandardTree: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<StandardTreeProps>, ref: StandardTreeProps['ref']) => {\n    return props.nodes.length > 0 ? <StandardTreeWithNodes {...props} ref={ref} /> : null;\n  }\n);\n\nexport default StandardTree;\n"]}

package/lib/components/Tree/Tree.js

@@ -15,18 +15,18 @@ export const StyledTreeList = styled.ul `
   }
 `;
 const DefaultNodeRenderer = ({ data, subTree }) => {
-    return (_jsxs(_Fragment, { children: [data, subTree] }, void 0));
+    return (_jsxs(_Fragment, { children: [data, subTree] }));
 };
 let TreeList;
 const TreeItem = ({ listItemProps, depth, nodes, nodeRenderer: NodeRenderer, ...restProps }) => {
-    return (_jsx(StyledTreeListItem, { ...listItemProps, children: _jsx(NodeRenderer, { ...restProps, depth: depth, nodes: nodes, subTree: nodes && _jsx(TreeList, { depth: depth + 1, nodes: nodes, nodeRenderer: NodeRenderer }, void 0) }, void 0) }, void 0));
+    return (_jsx(StyledTreeListItem, { ...listItemProps, children: _jsx(NodeRenderer, { ...restProps, depth: depth, nodes: nodes, subTree: nodes && _jsx(TreeList, { depth: depth + 1, nodes: nodes, nodeRenderer: NodeRenderer }) }) }));
 };
 TreeList = forwardRef(({ nodes, depth, nodeRenderer, ...restProps }, ref) => {
     const hasParentSibling = nodes.some(node => !!node.nodes);
-    return nodes.length > 0 ? (_jsx(StyledTreeList, { ...restProps, ref: ref, role: depth === 0 ? 'tree' : 'group', children: nodes.map(node => (_createElement(TreeItem, { ...node, key: node.id, depth: depth, nodeRenderer: nodeRenderer, hasParentSibling: hasParentSibling }))) }, void 0)) : null;
+    return nodes.length > 0 ? (_jsx(StyledTreeList, { ...restProps, ref: ref, role: depth === 0 ? 'tree' : 'group', children: nodes.map(node => (_createElement(TreeItem, { ...node, key: node.id, depth: depth, nodeRenderer: nodeRenderer, hasParentSibling: hasParentSibling }))) })) : null;
 });
 const Tree = forwardRef(({ nodeRenderer = DefaultNodeRenderer, ...restProps }, ref) => {
-    return _jsx(TreeList, { ...restProps, ref: ref, depth: 0, nodeRenderer: nodeRenderer }, void 0);
+    return _jsx(TreeList, { ...restProps, ref: ref, depth: 0, nodeRenderer: nodeRenderer });
 });
 export default Tree;
 //# sourceMappingURL=Tree.js.map

package/lib/components/Tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAyCvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOnC,kBAAkB;;;CAGrB,CAAC;AAEF,MAAM,mBAAmB,GAA8B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,8BACG,IAAI,EACJ,OAAO,YACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAaF,IAAI,QAAsC,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,OAAO,CACL,KAAC,kBAAkB,OAAK,aAAa,YACnC,KAAC,YAAY,OACP,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,WAAI,WAC1F,WACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,GAAG,UAAU,CACnB,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAkC,EAC5E,GAAsB,EACtB,EAAE;IACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,cAAc,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,YAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,WACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAAG,SAAS,EAA8B,EAChF,GAAqB,EACrB,EAAE;IACF,OAAO,KAAC,QAAQ,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,WAAI,CAAC;AACrF,CAAC,CAC2F,CAAC;AAE/F,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ComponentType, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\n\nexport type OldTreeNode<T extends object = Record<string, unknown>> = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: OldTreeNode<T>[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n} & T;\n\nexport type TreeNode = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: TreeNode[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n};\n\nexport interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp {\n  /** An array of ParentNodes and Nodes that compose the layout of the Tree. */\n  nodes: T[];\n  /** A function that allows custom styling and behavior for all Nodes. */\n  nodeRenderer?: ComponentType<\n    {\n      depth: number;\n      subTree?: ReactNode;\n      hasParentSibling: TreeItemProps['hasParentSibling'];\n    } & Exclude<T, 'listItemProps'>\n  >;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledTreeListItem = styled.li``;\n\nexport const StyledTreeList = styled.ul`\n  &,\n  & & {\n    list-style: none;\n    position: relative;\n  }\n\n  ${StyledTreeListItem} {\n    position: relative;\n  }\n`;\n\nconst DefaultNodeRenderer: TreeProps['nodeRenderer'] = ({ data, subTree }) => {\n  return (\n    <>\n      {data}\n      {subTree}\n    </>\n  );\n};\n\ninterface TreeItemProps extends TreeNode {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n  hasParentSibling: boolean;\n}\n\ninterface TreeListProps extends Pick<TreeProps, 'nodes' | 'ref'> {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n}\n\nlet TreeList: ComponentType<TreeListProps>;\n\nconst TreeItem = ({\n  listItemProps,\n  depth,\n  nodes,\n  nodeRenderer: NodeRenderer,\n  ...restProps\n}: TreeItemProps) => {\n  return (\n    <StyledTreeListItem {...listItemProps}>\n      <NodeRenderer\n        {...restProps}\n        depth={depth}\n        nodes={nodes}\n        subTree={nodes && <TreeList depth={depth + 1} nodes={nodes} nodeRenderer={NodeRenderer} />}\n      />\n    </StyledTreeListItem>\n  );\n};\n\nTreeList = forwardRef(\n  (\n    { nodes, depth, nodeRenderer, ...restProps }: PropsWithoutRef<TreeListProps>,\n    ref?: TreeProps['ref']\n  ) => {\n    const hasParentSibling = nodes.some(node => !!node.nodes);\n    return nodes.length > 0 ? (\n      <StyledTreeList {...restProps} ref={ref} role={depth === 0 ? 'tree' : 'group'}>\n        {nodes.map(node => (\n          <TreeItem\n            {...node}\n            key={node.id}\n            depth={depth}\n            nodeRenderer={nodeRenderer}\n            hasParentSibling={hasParentSibling}\n          />\n        ))}\n      </StyledTreeList>\n    ) : null;\n  }\n);\n\nconst Tree = forwardRef(\n  (\n    { nodeRenderer = DefaultNodeRenderer, ...restProps }: PropsWithoutRef<TreeProps>,\n    ref: TreeProps['ref']\n  ) => {\n    return <TreeList {...restProps} ref={ref} depth={0} nodeRenderer={nodeRenderer} />;\n  }\n) as <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;\n\nexport default Tree;\n"]}
+{"version":3,"file":"Tree.js","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAyCvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOnC,kBAAkB;;;CAGrB,CAAC;AAEF,MAAM,mBAAmB,GAA8B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,8BACG,IAAI,EACJ,OAAO,IACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAaF,IAAI,QAAsC,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,OAAO,CACL,KAAC,kBAAkB,OAAK,aAAa,YACnC,KAAC,YAAY,OACP,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,GAC1F,GACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,GAAG,UAAU,CACnB,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAkC,EAC5E,GAAsB,EACtB,EAAE;IACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,cAAc,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,YAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,GACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAAG,SAAS,EAA8B,EAChF,GAAqB,EACrB,EAAE;IACF,OAAO,KAAC,QAAQ,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;AACrF,CAAC,CAC2F,CAAC;AAE/F,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ComponentType, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\n\nexport type OldTreeNode<T extends object = Record<string, unknown>> = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: OldTreeNode<T>[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n} & T;\n\nexport type TreeNode = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: TreeNode[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n};\n\nexport interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp {\n  /** An array of ParentNodes and Nodes that compose the layout of the Tree. */\n  nodes: T[];\n  /** A function that allows custom styling and behavior for all Nodes. */\n  nodeRenderer?: ComponentType<\n    {\n      depth: number;\n      subTree?: ReactNode;\n      hasParentSibling: TreeItemProps['hasParentSibling'];\n    } & Exclude<T, 'listItemProps'>\n  >;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledTreeListItem = styled.li``;\n\nexport const StyledTreeList = styled.ul`\n  &,\n  & & {\n    list-style: none;\n    position: relative;\n  }\n\n  ${StyledTreeListItem} {\n    position: relative;\n  }\n`;\n\nconst DefaultNodeRenderer: TreeProps['nodeRenderer'] = ({ data, subTree }) => {\n  return (\n    <>\n      {data}\n      {subTree}\n    </>\n  );\n};\n\ninterface TreeItemProps extends TreeNode {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n  hasParentSibling: boolean;\n}\n\ninterface TreeListProps extends Pick<TreeProps, 'nodes' | 'ref'> {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n}\n\nlet TreeList: ComponentType<TreeListProps>;\n\nconst TreeItem = ({\n  listItemProps,\n  depth,\n  nodes,\n  nodeRenderer: NodeRenderer,\n  ...restProps\n}: TreeItemProps) => {\n  return (\n    <StyledTreeListItem {...listItemProps}>\n      <NodeRenderer\n        {...restProps}\n        depth={depth}\n        nodes={nodes}\n        subTree={nodes && <TreeList depth={depth + 1} nodes={nodes} nodeRenderer={NodeRenderer} />}\n      />\n    </StyledTreeListItem>\n  );\n};\n\nTreeList = forwardRef(\n  (\n    { nodes, depth, nodeRenderer, ...restProps }: PropsWithoutRef<TreeListProps>,\n    ref?: TreeProps['ref']\n  ) => {\n    const hasParentSibling = nodes.some(node => !!node.nodes);\n    return nodes.length > 0 ? (\n      <StyledTreeList {...restProps} ref={ref} role={depth === 0 ? 'tree' : 'group'}>\n        {nodes.map(node => (\n          <TreeItem\n            {...node}\n            key={node.id}\n            depth={depth}\n            nodeRenderer={nodeRenderer}\n            hasParentSibling={hasParentSibling}\n          />\n        ))}\n      </StyledTreeList>\n    ) : null;\n  }\n);\n\nconst Tree = forwardRef(\n  (\n    { nodeRenderer = DefaultNodeRenderer, ...restProps }: PropsWithoutRef<TreeProps>,\n    ref: TreeProps['ref']\n  ) => {\n    return <TreeList {...restProps} ref={ref} depth={0} nodeRenderer={nodeRenderer} />;\n  }\n) as <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;\n\nexport default Tree;\n"]}

package/lib/components/URL/URLDisplay.js

@@ -26,8 +26,8 @@ const generateUrlMarkup = (url) => {
     }, []);
 };
 const URLDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    const displayValue = value ? (displayText || generateUrlMarkup(value)) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
-    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayValue }, void 0));
+    const displayValue = value ? (displayText || generateUrlMarkup(value)) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue })) : (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayValue }));
 });
 export default URLDisplay;
 //# sourceMappingURL=URLDisplay.js.map

package/lib/components/URL/URLDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"URLDisplay.js","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AAEvF,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAa,EAAE;IACnD,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,IAAI,CAAC;QACZ,6EAA6E;SAC5E,GAAG,CAAC,GAAG,CAAC,EAAE;QACT,OAAO,GAAG;aACP,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;aACzB,OAAO,CAAC,kBAAkB,EAAE,QAAQ,CAAC;aACrC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC,CAAC;SACD,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElB,+HAA+H;IAC/H,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAc,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE;QACxE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAU,YAAY,CAAC,MAAM,CAAI,CAAC,CAAC;QAC3D,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B,EAC3B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,WACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,YAAY,WACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\n\nimport Link from '../Link';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface URLDisplayProps extends BaseProps, NoChildrenProp {\n  /** URL address, includes scheme, 'http://', 'https://' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\n/**\n * Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.\n * It helps breaking a long url correctly to avoid parent container overflow issues\n * according to \"The Chicago Manual of Style\" copywriting standard.\n * @param url input url to construct markup for\n * @returns array of nodes\n */\nconst generateUrlMarkup = (url: string): ReactNode => {\n  const markedUrl = url\n    .split('//')\n    /* Insert \\x1f (unit separator) char as a placeholder at correct position. */\n    .map(str => {\n      return str\n        .replace(/:/giu, '$&\\x1f')\n        .replace(/[/~.,\\\\-_?#%]/giu, '\\x1f$&')\n        .replace(/[=&]/giu, '\\x1f$&\\x1f');\n    })\n    .join('//\\x1f');\n\n  /* Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping. */\n  return markedUrl.split('\\x1f').reduce<ReactNode[]>((urlFragments, part) => {\n    urlFragments.push(part, <wbr key={urlFragments.length} />);\n    return urlFragments;\n  }, []);\n};\n\nconst URLDisplay: FunctionComponent<URLDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<URLDisplayProps>,\n    ref: URLDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || generateUrlMarkup(value)\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default URLDisplay;\n"]}
+{"version":3,"file":"URLDisplay.js","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AAEvF,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAa,EAAE;IACnD,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,IAAI,CAAC;QACZ,6EAA6E;SAC5E,GAAG,CAAC,GAAG,CAAC,EAAE;QACT,OAAO,GAAG;aACP,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;aACzB,OAAO,CAAC,kBAAkB,EAAE,QAAQ,CAAC;aACrC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC,CAAC;SACD,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElB,+HAA+H;IAC/H,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAc,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE;QACxE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAU,YAAY,CAAC,MAAM,CAAI,CAAC,CAAC;QAC3D,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B,EAC3B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\n\nimport Link from '../Link';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface URLDisplayProps extends BaseProps, NoChildrenProp {\n  /** URL address, includes scheme, 'http://', 'https://' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\n/**\n * Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.\n * It helps breaking a long url correctly to avoid parent container overflow issues\n * according to \"The Chicago Manual of Style\" copywriting standard.\n * @param url input url to construct markup for\n * @returns array of nodes\n */\nconst generateUrlMarkup = (url: string): ReactNode => {\n  const markedUrl = url\n    .split('//')\n    /* Insert \\x1f (unit separator) char as a placeholder at correct position. */\n    .map(str => {\n      return str\n        .replace(/:/giu, '$&\\x1f')\n        .replace(/[/~.,\\\\-_?#%]/giu, '\\x1f$&')\n        .replace(/[=&]/giu, '\\x1f$&\\x1f');\n    })\n    .join('//\\x1f');\n\n  /* Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping. */\n  return markedUrl.split('\\x1f').reduce<ReactNode[]>((urlFragments, part) => {\n    urlFragments.push(part, <wbr key={urlFragments.length} />);\n    return urlFragments;\n  }, []);\n};\n\nconst URLDisplay: FunctionComponent<URLDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<URLDisplayProps>,\n    ref: URLDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || generateUrlMarkup(value)\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default URLDisplay;\n"]}

package/lib/components/VisuallyHiddenText/VisuallyHiddenText.js

@@ -5,6 +5,6 @@ import { hideVisually } from 'polished';
 export const StyledVisuallyHiddenText = styled.span `
   ${hideVisually}
 `;
-const VisuallyHiddenText = forwardRef((props, ref) => (_jsx(StyledVisuallyHiddenText, { ...props, ref: ref }, void 0)));
+const VisuallyHiddenText = forwardRef((props, ref) => (_jsx(StyledVisuallyHiddenText, { ...props, ref: ref, hidden: true })));
 export default VisuallyHiddenText;
 //# sourceMappingURL=VisuallyHiddenText.js.map

package/lib/components/VisuallyHiddenText/VisuallyHiddenText.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHiddenText.js","sourceRoot":"","sources":["../../../src/components/VisuallyHiddenText/VisuallyHiddenText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAA;IAC/C,YAAY;CACf,CAAC;AAEF,MAAM,kBAAkB,GAA8D,UAAU,CAC9F,CAAC,KAA+C,EAAE,GAAmC,EAAE,EAAE,CAAC,CACxF,KAAC,wBAAwB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,WAAI,CAClD,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { ForwardProps } from '../../types';\n\ninterface VisuallyHiddenTextProps {\n  children: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport const StyledVisuallyHiddenText = styled.span`\n  ${hideVisually}\n`;\n\nconst VisuallyHiddenText: FunctionComponent<VisuallyHiddenTextProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<VisuallyHiddenTextProps>, ref: VisuallyHiddenTextProps['ref']) => (\n    <StyledVisuallyHiddenText {...props} ref={ref} />\n  )\n);\n\nexport default VisuallyHiddenText;\n"]}
+{"version":3,"file":"VisuallyHiddenText.js","sourceRoot":"","sources":["../../../src/components/VisuallyHiddenText/VisuallyHiddenText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAA;IAC/C,YAAY;CACf,CAAC;AAEF,MAAM,kBAAkB,GAA8D,UAAU,CAC9F,CAAC,KAA+C,EAAE,GAAmC,EAAE,EAAE,CAAC,CACxF,KAAC,wBAAwB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,SAAG,CACzD,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { ForwardProps } from '../../types';\n\ninterface VisuallyHiddenTextProps {\n  children: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport const StyledVisuallyHiddenText = styled.span`\n  ${hideVisually}\n`;\n\nconst VisuallyHiddenText: FunctionComponent<VisuallyHiddenTextProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<VisuallyHiddenTextProps>, ref: VisuallyHiddenTextProps['ref']) => (\n    <StyledVisuallyHiddenText {...props} ref={ref} hidden />\n  )\n);\n\nexport default VisuallyHiddenText;\n"]}

package/lib/hooks/index.d.ts

@@ -8,6 +8,9 @@ export { default as useConsolidatedRef } from './useConsolidatedRef';
 export { default as useDirection } from './useDirection';
 export { default as useDraggable } from './useDraggable';
 export { default as useElement } from './useElement';
+export { default as useEscape } from './useEscape';
+export { default as useEvent } from './useEvent';
+export { default as useFocusTrap } from './useFocusTrap';
 export { default as useFocusWithin } from './useFocusWithin';
 export { default as useI18n } from './useI18n';
 export { default as useItemIntersection } from './useItemIntersection';

package/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/lib/hooks/index.js

@@ -8,6 +8,9 @@ export { default as useConsolidatedRef } from './useConsolidatedRef';
 export { default as useDirection } from './useDirection';
 export { default as useDraggable } from './useDraggable';
 export { default as useElement } from './useElement';
+export { default as useEscape } from './useEscape';
+export { default as useEvent } from './useEvent';
+export { default as useFocusTrap } from './useFocusTrap';
 export { default as useFocusWithin } from './useFocusWithin';
 export { default as useI18n } from './useI18n';
 export { default as useItemIntersection } from './useItemIntersection';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAE9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export {\n  default as useActiveDescendant,\n  UseActiveDescendantConfig,\n  useLazyDescendant\n} from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as useOverride } from './useOverride';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTheme } from './useTheme';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAE9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export {\n  default as useActiveDescendant,\n  UseActiveDescendantConfig,\n  useLazyDescendant\n} from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useEscape } from './useEscape';\nexport { default as useEvent } from './useEvent';\nexport { default as useFocusTrap } from './useFocusTrap';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as useOverride } from './useOverride';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTheme } from './useTheme';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}

package/lib/hooks/useEscape.d.ts

@@ -0,0 +1,10 @@
+import { DependencyList, RefObject } from 'react';
+/**
+ * @example useEscape((event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param target To which esc event to be attached - Defaults to document
+ * @param dependencies List of dependencies
+ */
+declare const useEscape: (cb: (e: KeyboardEvent) => void, target?: HTMLElement | RefObject<HTMLElement> | Document | null, dependencies?: DependencyList) => void;
+export default useEscape;
+//# sourceMappingURL=useEscape.d.ts.map

package/lib/hooks/useEscape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscape.d.ts","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/D;;;;;GAKG;AAEH,QAAA,MAAM,SAAS,WACL,aAAa,KAAK,IAAI,WACtB,WAAW,GAAG,UAAU,WAAW,CAAC,GAAG,QAAQ,GAAG,IAAI,wCAW/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/hooks/useEscape.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import useEvent from './useEvent';
+/**
+ * @example useEscape((event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param target To which esc event to be attached - Defaults to document
+ * @param dependencies List of dependencies
+ */
+const useEscape = (cb, target = document, dependencies = []) => {
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Escape')
+            cb(e);
+    }, [cb, ...dependencies]);
+    useEvent('keydown', onKeydown, { target });
+};
+export default useEscape;
+//# sourceMappingURL=useEscape.js.map

package/lib/hooks/useEscape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AAEH,MAAM,SAAS,GAAG,CAChB,EAA8B,EAC9B,SAAiE,QAAQ,EACzE,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,EAAE,EAAE,GAAG,YAAY,CAAC,CACtB,CAAC;IAEF,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { DependencyList, RefObject, useCallback } from 'react';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useEscape((event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param target To which esc event to be attached - Defaults to document\n * @param dependencies List of dependencies\n */\n\nconst useEscape = (\n  cb: (e: KeyboardEvent) => void,\n  target: HTMLElement | RefObject<HTMLElement> | Document | null = document,\n  dependencies: DependencyList = []\n) => {\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') cb(e);\n    },\n    [cb, ...dependencies]\n  );\n\n  useEvent('keydown', onKeydown, { target });\n};\n\nexport default useEscape;\n"]}

package/lib/hooks/useEvent.d.ts

@@ -0,0 +1,27 @@
+import { DependencyList, RefObject } from 'react';
+declare type EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement ? HTMLElementEventMap : Target extends SVGElement ? SVGElementEventMap : Target extends Document ? DocumentEventMap : Target extends Window ? WindowEventMap : {
+    [eventType: string]: Event;
+};
+declare type EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;
+/**
+ * @example useEvent('keydown', (event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param options
+ */
+declare function useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts?: {
+    target?: undefined;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies: DependencyList;
+}): void;
+declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts: {
+    target: Target | RefObject<Target> | null;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies?: DependencyList;
+}): void;
+declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target | Document>>(eventName: EventName, cb: (e: EventMapForTarget<Target | Document>[EventName]) => void, opts: {
+    target?: Target | RefObject<Target> | null | undefined;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies?: DependencyList;
+}): void;
+export default useEvent;
+//# sourceMappingURL=useEvent.d.ts.map

package/lib/hooks/useEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7D,aAAK,iBAAiB,CAAC,MAAM,SAAS,WAAW,IAAI,MAAM,SAAS,WAAW,GAC3E,mBAAmB,GACnB,MAAM,SAAS,UAAU,GACzB,kBAAkB,GAClB,MAAM,SAAS,QAAQ,GACvB,gBAAgB,GAChB,MAAM,SAAS,MAAM,GACrB,cAAc,GACd;IACE,CAAC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B,CAAC;AACN,aAAK,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;AAEtF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,MAAM,SAAS,QAAQ,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACtF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,CAAC,EAAE;IACL,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC;CAC9B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACzF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,EAAE;IACJ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CACf,MAAM,SAAS,WAAW,EAC1B,SAAS,SAAS,mBAAmB,CAAC,MAAM,GAAG,QAAQ,CAAC,EAExD,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAChE,IAAI,EAAE;IACJ,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AA2BR,eAAe,QAAQ,CAAC"}

package/lib/hooks/useEvent.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { normalizeElements } from '../utils';
+function useEvent(eventName, cb, { target = document, eventOptions, dependencies = [] } = {}) {
+    useEffect(() => {
+        const [element] = normalizeElements([target]);
+        if (!element)
+            return;
+        element.addEventListener(eventName, cb, eventOptions);
+        return () => {
+            element.removeEventListener(eventName, cb, eventOptions);
+        };
+    }, [eventName, target, cb, eventOptions, ...dependencies]);
+}
+export default useEvent;
+//# sourceMappingURL=useEvent.js.map

package/lib/hooks/useEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.js","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAsD7C,SAAS,QAAQ,CACf,SAAoB,EACpB,EAAqD,EACrD,EACE,MAAM,GAAG,QAA6B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,KAKf,EAAE;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,CAAC,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { DependencyList, RefObject, useEffect } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n//  Based on https://github.com/microsoft/TypeScript/issues/33047#issuecomment-704005614\ntype EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement\n  ? HTMLElementEventMap\n  : Target extends SVGElement\n  ? SVGElementEventMap\n  : Target extends Document\n  ? DocumentEventMap\n  : Target extends Window\n  ? WindowEventMap\n  : {\n      [eventType: string]: Event;\n    };\ntype EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;\n\n/**\n * @example useEvent('keydown', (event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param options\n */\nfunction useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target>[EventName]) => void,\n  opts?: {\n    target?: undefined;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies: DependencyList;\n  }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target>[EventName]) => void,\n  opts: {\n    target: Target | RefObject<Target> | null;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies?: DependencyList;\n  }\n): void;\n\nfunction useEvent<\n  Target extends EventTarget,\n  EventName extends EventNamesForTarget<Target | Document>\n>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target | Document>[EventName]) => void,\n  opts: {\n    target?: Target | RefObject<Target> | null | undefined;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies?: DependencyList;\n  }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target>[EventName]) => void,\n  {\n    target = document as unknown as Target,\n    eventOptions,\n    dependencies = []\n  }: {\n    target?: Target | RefObject<Target> | null;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies?: DependencyList;\n  } = {}\n) {\n  useEffect(() => {\n    const [element] = normalizeElements([target]);\n    if (!element) return;\n\n    element.addEventListener(eventName, cb as EventListener, eventOptions);\n\n    return () => {\n      element.removeEventListener(eventName, cb as EventListener, eventOptions);\n    };\n  }, [eventName, target, cb, eventOptions, ...dependencies]);\n}\n\nexport default useEvent;\n"]}

package/lib/hooks/useFocusTrap.d.ts

@@ -0,0 +1,10 @@
+import { RefObject, DependencyList } from 'react';
+/**
+ * @example useFocusTrap(elementRef)
+ * @param elementRef ref of the element in which focus needs to be retained
+ * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true
+ * @param dependencies  list of variables or functions that will initiate this hook when they are updated.
+ */
+declare const useFocusTrap: (elementRef: RefObject<HTMLElement>, attachToDocument?: boolean, dependencies?: DependencyList) => void;
+export default useFocusTrap;
+//# sourceMappingURL=useFocusTrap.d.ts.map

package/lib/hooks/useFocusTrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,cAAc,EAAE,MAAM,OAAO,CAAC;AAM/D;;;;;GAKG;AACH,QAAA,MAAM,YAAY,eACJ,UAAU,WAAW,CAAC,qBAChB,OAAO,wCAyB1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useFocusTrap.js

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { getFocusables } from '../utils';
+import useEvent from './useEvent';
+/**
+ * @example useFocusTrap(elementRef)
+ * @param elementRef ref of the element in which focus needs to be retained
+ * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true
+ * @param dependencies  list of variables or functions that will initiate this hook when they are updated.
+ */
+const useFocusTrap = (elementRef, attachToDocument = true, dependencies = []) => {
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Tab') {
+            const focusables = getFocusables(elementRef);
+            const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;
+            if (!e.shiftKey &&
+                (document.activeElement === elementRef.current || document.activeElement === lastFocusable)) {
+                firstFocusable?.focus();
+                e.preventDefault();
+            }
+            else if (e.shiftKey &&
+                (document.activeElement === elementRef.current || document.activeElement === firstFocusable)) {
+                lastFocusable?.focus();
+                e.preventDefault();
+            }
+        }
+    }, dependencies);
+    useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });
+};
+export default useFocusTrap;
+//# sourceMappingURL=useFocusTrap.js.map

package/lib/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YAEjF,IACE,CAAC,CAAC,CAAC,QAAQ;gBACX,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,EAC3F;gBACA,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IACL,CAAC,CAAC,QAAQ;gBACV,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,CAAC,EAC5F;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACxF,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { RefObject, useCallback, DependencyList } from 'react';\n\nimport { getFocusables } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies  list of variables or functions that will initiate this hook when they are updated.\n */\nconst useFocusTrap = (\n  elementRef: RefObject<HTMLElement>,\n  attachToDocument: boolean = true,\n  dependencies: DependencyList = []\n) => {\n  const onKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Tab') {\n      const focusables = getFocusables(elementRef);\n      const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n\n      if (\n        !e.shiftKey &&\n        (document.activeElement === elementRef.current || document.activeElement === lastFocusable)\n      ) {\n        firstFocusable?.focus();\n        e.preventDefault();\n      } else if (\n        e.shiftKey &&\n        (document.activeElement === elementRef.current || document.activeElement === firstFocusable)\n      ) {\n        lastFocusable?.focus();\n        e.preventDefault();\n      }\n    }\n  }, dependencies);\n\n  useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}