@pega/cosmos-react-core 2.0.0-dev.9.4 → 2.0.0-rc.4

package/lib/components/Toaster/Toaster.js

@@ -1,59 +1,21 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useReducer, useCallback, useMemo, useLayoutEffect } from 'react';
+import { createContext, useContext, useReducer, useMemo, useLayoutEffect, useRef, useState, forwardRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
-import Icon from '../Icon';
-import { reflow, createUID } from '../../utils';
-import { useConfiguration } from '../../hooks';
+import Icon, { registerIcon } from '../Icon';
+import * as timesIcon from '../Icon/icons/times.icon';
+import { createUID } from '../../utils';
+import { useConfiguration, useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
+import Flex from '../Flex';
+registerIcon(timesIcon);
 export const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');
 export const ToasterContext = createContext({
     push: () => { },
     [initializedKey]: false
 });
-function reducer(current, { action, message: incoming }) {
-    switch (action) {
-        case 'push':
-            if (!incoming)
-                return current;
-            return [
-                ...current,
-                {
-                    content: incoming.content,
-                    dismissed: false,
-                    dismissAfter: incoming.dismissAfter,
-                    timeoutId: incoming.timeoutId,
-                    id: incoming.id,
-                    onDismiss: incoming.onDismiss,
-                    translateY: 0
-                }
-            ];
-        case 'adjust':
-            return current.map((m, i) => {
-                const height = 2.625;
-                const margin = 0.5;
-                const msgSpace = Number((height + margin).toFixed(1));
-                const count = current.length - i;
-                m.translateY = -(count * msgSpace);
-                return m;
-            });
-        case 'dismiss':
-            if (!incoming)
-                return current;
-            return current.map(m => {
-                m.dismissed = m.dismissed || m.id === incoming.id;
-                return m;
-            });
-        case 'remove':
-            if (!incoming)
-                return current;
-            return current.filter(m => m.id !== incoming.id);
-        default:
-            return current;
-    }
-}
 const StyledToastButton = styled.button(({ theme }) => css `
     border: none;
     color: inherit;
@@ -69,100 +31,133 @@ const StyledToastButton = styled.button(({ theme }) => css `
     }
   `);
 StyledToastButton.defaultProps = defaultThemeProp;
-const StyledToastContent = styled.div `
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const StyledToast = styled.div(({ dismissed, theme }) => {
+const StyledToastContent = styled.div(({ theme }) => {
+    return css `
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: ${theme.base['font-size']};
+    margin-inline-start: calc(${theme.base['border-radius']} / 2);
+  `;
+});
+StyledToastContent.defaultProps = defaultThemeProp;
+const StyledToast = styled.div(({ theme }) => {
     return css `
     position: absolute;
-    display: flex;
-    align-items: center;
-    font-size: 0.875rem;
-    height: 2.625rem;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     width: 100%;
-    top: 0;
-    left: 0;
-    padding: calc(1.5 * ${theme.base.spacing}) ${theme.base.spacing};
-    padding-left: calc(2 * ${theme.base.spacing});
+    padding: calc(${theme.base.spacing} / 2);
     background: ${theme.base.colors.slate['extra-dark']};
     color: ${theme.base.colors.white};
     border-radius: calc(${theme.base['border-radius']} / 2);
-    opacity: ${dismissed ? 0 : 1};
-    will-change: transform;
-    transform: var(--translateY) ${dismissed ? 'scale(0)' : ''};
+    opacity: var(--opacity);
+    transform: translateY(var(--translateY)) scale(var(--scale));
     transition-property: transform, opacity;
-    transition-duration: 0.3s;
-    transition-timing-function: cubic-bezier(0.4, 0.6, 0.1, 1);
+    transition-duration: ${theme.base.animation.speed};
+    transition-timing-function: ${theme.base.animation.timing.ease};
   `;
 });
 StyledToast.defaultProps = defaultThemeProp;
 const StyledToaster = styled.div `
   position: fixed;
   z-index: ${({ theme }) => theme.base['z-index'].toast};
-  width: 20rem;
-  left: 50%;
-  margin-left: -10rem;
+  width: min(40ch, calc(100% - 1rem));
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
   top: 100%;
 `;
 StyledToaster.defaultProps = defaultThemeProp;
-export const Toast = (props) => {
-    const { dispatch, onDismiss, ...message } = props;
-    const { content, dismissed, timeoutId, translateY } = message;
-    const handleTransEnd = useCallback((e) => {
-        if (dismissed && e.propertyName === 'opacity') {
-            dispatch({ action: 'remove', message });
+function reducer(current, action) {
+    switch (action.type) {
+        case 'push':
+            return [
+                ...current,
+                {
+                    ...action.payload
+                }
+            ];
+        case 'unmount':
+            return current.filter(m => m.id !== action.payload);
+        default:
+            return current;
+    }
+}
+const Toast = forwardRef(({ dispatch, topLevelDismiss, dismissAfter, ...message }, ref) => {
+    const { content, translateY } = message;
+    const [dismissed, setDismissed] = useState(false);
+    const timeoutRef = useRef(NaN);
+    const t = useI18n();
+    const onTransitionEnd = (e) => {
+        if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {
+            dispatch({ type: 'unmount', payload: message.id });
         }
-    }, [dismissed]);
-    const dismiss = useCallback(() => {
-        clearTimeout(timeoutId);
+    };
+    const dismiss = () => {
+        clearTimeout(timeoutRef.current);
         if (dismissed)
             return;
-        dispatch({ action: 'dismiss', message });
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss({ id: message.id, timeout: false });
-    }, [timeoutId, dismissed, onDismiss]);
-    return (_jsxs(StyledToast, Object.assign({ style: { '--translateY': `translateY(${translateY}rem)` }, dismissed: dismissed, onTransitionEnd: handleTransEnd }, { children: [_jsx(StyledToastContent, { children: content }, void 0),
-            _jsx(Button, Object.assign({ as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true }, { children: _jsx(Icon, { name: 'times' }, void 0) }), void 0)] }), void 0));
-};
+        setDismissed(true);
+        topLevelDismiss?.({ id: message.id, timeout: false });
+    };
+    useEffect(() => {
+        if (Number.isFinite(dismissAfter)) {
+            timeoutRef.current = setTimeout(dismiss, dismissAfter);
+        }
+        return () => {
+            clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.25 }, as: StyledToast, ref: ref, style: {
+            '--translateY': `${-translateY}px`,
+            '--opacity': dismissed ? '0' : '1',
+            '--scale': dismissed ? '0' : '1'
+        }, onTransitionEnd: onTransitionEnd, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledToastContent, children: content }, void 0), _jsx(Button, { as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true, "aria-label": t('dismiss_label'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
+});
 const Toaster = ({ children, dismissAfter = Infinity, onDismiss, context = ToasterContext }) => {
     const { portalTarget } = useConfiguration();
     const [messages, dispatch] = useReducer(reducer, []);
+    const [yOffsets, setYOffsets] = useState([]);
+    const heightHashRef = useRef({});
+    // This effect will cause a re-render with a translateY value set for each toast.
     useLayoutEffect(() => {
-        reflow();
-        dispatch({ action: 'adjust' });
+        const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);
+        setYOffsets(heights
+            .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))
+            .reverse());
     }, [messages.length]);
     const providerValue = useMemo(() => ({
         push(incoming) {
-            var _a, _b;
             const message = {
                 ...incoming,
-                id: (_a = incoming.id) !== null && _a !== void 0 ? _a : createUID()
+                id: incoming.id ?? createUID()
             };
-            const dismissTime = (_b = message.dismissAfter) !== null && _b !== void 0 ? _b : dismissAfter;
-            if (Number.isFinite(dismissTime)) {
-                message.timeoutId = setTimeout((timedOutMsg) => {
-                    var _a;
-                    dispatch({ action: 'dismiss', message });
-                    (_a = (message.onDismiss || onDismiss)) === null || _a === void 0 ? void 0 : _a({ id: timedOutMsg.id, timeout: true });
-                }, dismissTime, message);
-            }
             dispatch({
-                action: 'push',
-                message
+                type: 'push',
+                payload: message
             });
         },
         [initializedKey]: true
     }), [onDismiss, dismissAfter]);
     // Don't create additional ToasterContext.Providers.
     const priorCtx = useContext(context);
-    if (priorCtx[initializedKey])
-        return _jsx(ToasterContext.Provider, Object.assign({ value: priorCtx }, { children: children }), void 0);
-    return (_jsxs(_Fragment, { children: [_jsx(ToasterContext.Provider, Object.assign({ value: providerValue }, { children: children }), void 0),
-            !!messages.length &&
+    if (priorCtx[initializedKey]) {
+        return _jsx(ToasterContext.Provider, { value: priorCtx, children: children }, void 0);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ToasterContext.Provider, { value: providerValue, children: children }, void 0), !!messages.length &&
                 portalTarget &&
-                createPortal(_jsx(StyledToaster, { children: messages.map(message => (_createElement(Toast, { onDismiss: onDismiss, ...message, key: message.id, dispatch: dispatch }))) }, void 0), portalTarget)] }, void 0));
+                createPortal(_jsx(StyledToaster, { children: messages.map((message, i) => {
+                        return (_createElement(Toast, { ...message, translateY: yOffsets[i] ?? 0, topLevelDismiss: onDismiss, dismissAfter: message.dismissAfter ?? dismissAfter, key: message.id, dispatch: dispatch, ref: el => {
+                                if (el) {
+                                    heightHashRef.current[message.id] = el.offsetHeight;
+                                }
+                                else {
+                                    delete heightHashRef.current[message.id];
+                                }
+                            } }));
+                    }) }, void 0), portalTarget)] }, void 0));
 };
 export default Toaster;
 //# sourceMappingURL=Toaster.js.map

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  useCallback,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  ReactNode,\n  CSSProperties,\n  TransitionEvent,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport { reflow, createUID } from '../../utils';\nimport { DeepRequired } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');\n\nexport interface ToasterContextValue {\n  push: (message: IncomingMessage) => void;\n  [initializedKey]: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  [initializedKey]: false\n});\n\ninterface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id: string;\n  /** Recommend a simple string message. */\n  content: 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?: 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: string; timeout: boolean }) => void;\n  /** internal prop */\n  dismissed: boolean;\n  /** internal prop */\n  timeoutId?: number;\n  /** internal prop */\n  translateY: number;\n}\n\nexport interface IncomingMessage {\n  /** Id of the Toast. */\n  id?: string;\n  /** The content to display within the Toast. */\n  content: 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  /** The id of the timeout controlling the Toast duration. */\n  timeoutId?: ToastMessage['timeoutId'];\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\ntype DispatchAction = 'push' | 'dismiss' | 'remove' | 'adjust';\n\nfunction reducer(\n  current: ToastMessage[],\n  { action, message: incoming }: { action: DispatchAction; message?: DeepRequired<IncomingMessage> }\n) {\n  switch (action) {\n    case 'push':\n      if (!incoming) return current;\n      return [\n        ...current,\n        {\n          content: incoming.content,\n          dismissed: false,\n          dismissAfter: incoming.dismissAfter,\n          timeoutId: incoming.timeoutId,\n          id: incoming.id,\n          onDismiss: incoming.onDismiss,\n          translateY: 0\n        }\n      ];\n\n    case 'adjust':\n      return current.map((m, i) => {\n        const height = 2.625;\n        const margin = 0.5;\n        const msgSpace = Number((height + margin).toFixed(1));\n        const count = current.length - i;\n        m.translateY = -(count * msgSpace);\n        return m;\n      });\n\n    case 'dismiss':\n      if (!incoming) return current;\n      return current.map(m => {\n        m.dismissed = m.dismissed || m.id === incoming.id;\n        return m;\n      });\n\n    case 'remove':\n      if (!incoming) return current;\n      return current.filter(m => m.id !== incoming.id);\n\n    default:\n      return current;\n  }\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`\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst StyledToast = styled.div<{ dismissed: boolean }>(({ dismissed, theme }) => {\n  return css`\n    position: absolute;\n    display: flex;\n    align-items: center;\n    font-size: 0.875rem;\n    height: 2.625rem;\n    width: 100%;\n    top: 0;\n    left: 0;\n    padding: calc(1.5 * ${theme.base.spacing}) ${theme.base.spacing};\n    padding-left: calc(2 * ${theme.base.spacing});\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: ${dismissed ? 0 : 1};\n    will-change: transform;\n    transform: var(--translateY) ${dismissed ? 'scale(0)' : ''};\n    transition-property: transform, opacity;\n    transition-duration: 0.3s;\n    transition-timing-function: cubic-bezier(0.4, 0.6, 0.1, 1);\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: 20rem;\n  left: 50%;\n  margin-left: -10rem;\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\ninterface ToastProps extends ToastMessage {\n  dispatch: (message: { action: DispatchAction; message: DeepRequired<IncomingMessage> }) => void;\n}\n\nexport const Toast: FunctionComponent<ToastProps> = (props: ToastProps) => {\n  const { dispatch, onDismiss, ...message } = props;\n  const { content, dismissed, timeoutId, translateY } = message;\n\n  const handleTransEnd = useCallback(\n    (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity') {\n        dispatch({ action: 'remove', message } as any);\n      }\n    },\n    [dismissed]\n  );\n\n  const dismiss = useCallback(() => {\n    clearTimeout(timeoutId);\n    if (dismissed) return;\n    dispatch({ action: 'dismiss', message } as any);\n    onDismiss?.({ id: message.id, timeout: false });\n  }, [timeoutId, dismissed, onDismiss]);\n\n  return (\n    <StyledToast\n      style={{ '--translateY': `translateY(${translateY}rem)` } as CSSProperties}\n      dismissed={dismissed}\n      onTransitionEnd={handleTransEnd}\n    >\n      <StyledToastContent>{content}</StyledToastContent>\n      <Button as={StyledToastButton} variant='simple' onClick={dismiss} icon>\n        <Icon name='times' />\n      </Button>\n    </StyledToast>\n  );\n};\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss,\n  context = ToasterContext\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n\n  const [messages, dispatch] = useReducer(reducer, []);\n  useLayoutEffect(() => {\n    reflow();\n    dispatch({ action: 'adjust' });\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: IncomingMessage) {\n        const message: DeepRequired<IncomingMessage> = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        } as DeepRequired<IncomingMessage>;\n\n        const dismissTime = message.dismissAfter ?? dismissAfter;\n\n        if (Number.isFinite(dismissTime)) {\n          message.timeoutId = setTimeout(\n            (timedOutMsg: ToastMessage) => {\n              dispatch({ action: 'dismiss', message });\n              (message.onDismiss || onDismiss)?.({ id: timedOutMsg.id, timeout: true });\n            },\n            dismissTime,\n            message\n          );\n        }\n\n        dispatch({\n          action: 'push',\n          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  return (\n    <>\n      <ToasterContext.Provider value={providerValue}>{children}</ToasterContext.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map(message => (\n              <Toast onDismiss={onDismiss} {...message} key={message.id} dispatch={dispatch} />\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.d.ts

@@ -18,9 +18,14 @@ export interface TooltipProps extends BaseProps {
     hideDelay?: Delay;
     /**
      * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).
-     * @default true
+     * @default false
      */
     portal?: PopoverProps['portal'];
+    /**
+     * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.
+     * @default true
+     */
+    describeTarget?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/lib/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAYxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAqH3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAYxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA8G3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Tooltip/Tooltip.js

@@ -18,10 +18,9 @@ export const StyledTooltip = styled.div(({ theme }) => {
   `;
 });
 StyledTooltip.defaultProps = defaultThemeProp;
-const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay = 'long', portal = false, ...restProps }, ref) => {
+const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay = 'long', portal = false, describeTarget = true, ...restProps }, ref) => {
     const id = useUID();
     const [show, setShow] = useState(false);
-    const [tooltipHover, setTooltipHover] = useState(false);
     const tooltipRef = useConsolidatedRef(ref);
     const lastClickedRef = useRef(null);
     const showTooltip = useCallback(() => {
@@ -43,21 +42,15 @@ const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay =
         setShow(true);
     }, [target]);
     const onMouseLeave = useCallback(() => {
-        if (document.activeElement !== target && !tooltipHover) {
+        if (document.activeElement !== target) {
             setShow(false);
         }
-    }, [target, tooltipHover]);
+    }, [target]);
     const onKeyDown = useCallback(({ key }) => {
         if (key === 'Escape' && document.activeElement === target) {
             setShow(false);
         }
     }, [target]);
-    useEffect(() => {
-        if (tooltipHover)
-            showTooltip();
-        else
-            onMouseLeave();
-    }, [tooltipHover, onMouseLeave]);
     useEffect(() => {
         if (!target)
             return;
@@ -77,11 +70,11 @@ const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay =
         };
     }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);
     useEffect(() => {
-        if (target && !target.getAttribute('aria-describedby')) {
+        if (target && !target.getAttribute('aria-describedby') && describeTarget) {
             target.setAttribute('aria-describedby', id);
         }
-    }, [target]);
-    return (_jsx(Popover, Object.assign({ 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, onMouseEnter: () => setTooltipHover(true), onMouseLeave: () => setTooltipHover(false), hideOnTargetHidden: true, ref: tooltipRef }, { children: children }), void 0));
+    }, [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));
 });
 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 true\n   */\n  portal?: PopoverProps['portal'];\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      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const [tooltipHover, setTooltipHover] = 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 && !tooltipHover) {\n        setShow(false);\n      }\n    }, [target, tooltipHover]);\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 (tooltipHover) showTooltip();\n      else onMouseLeave();\n    }, [tooltipHover, onMouseLeave]);\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')) {\n        target.setAttribute('aria-describedby', id);\n      }\n    }, [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        onMouseEnter={() => setTooltipHover(true)}\n        onMouseLeave={() => setTooltipHover(false)}\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.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '../../types';
+import type { StandardTreeProps } from './StandardTree.types';
+declare const StandardTree: FunctionComponent<StandardTreeProps & ForwardProps>;
+export default StandardTree;
+//# sourceMappingURL=StandardTree.d.ts.map

package/lib/components/Tree/StandardTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardTree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAM3F,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBxD,OAAO,KAAK,EAGV,iBAAiB,EAElB,MAAM,sBAAsB,CAAC;AAmO9B,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAmErE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Tree/StandardTree.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, createContext, useMemo, useContext, useCallback, useState } from 'react';
+import Progress from '../Progress';
+import { useDirection, useI18n } from '../../hooks';
+import Flex from '../Flex';
+import Actions from '../Actions';
+import { cap } from '../../utils';
+import { StyledStandardTreeParent, StyledToggleIcon, StyledStandardTreeItemSubTree, StyledStandardTreeLeaf, StyledStandardTree, StyledNodeInteraction, StyledStandardTreeNode, StyledNodeActions, StyledLabelContent, StyledNodeIcon, StyledNodeText } from './StandardTree.styles';
+import helpers from './helpers';
+const StandardTreeContext = createContext({
+    currentNodeId: undefined,
+    lined: false,
+    onNodeClick: () => { },
+    firstNodeId: undefined,
+    lastNodeId: undefined,
+    focusedNodeId: undefined,
+    changeFocusedNodeId: () => { }
+});
+const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expanded = false, loading = false, subTree, actions, onClick }) => {
+    const { currentNodeId, onNodeClick, lined, focusedNodeId, changeFocusedNodeId, firstNodeId, lastNodeId } = useContext(StandardTreeContext);
+    const current = currentNodeId === id;
+    const focusedEl = focusedNodeId === id;
+    const firstNode = firstNodeId === id;
+    const { start, end } = useDirection();
+    const t = useI18n();
+    const tabIndex = useMemo(() => {
+        let index = -1;
+        if (focusedNodeId) {
+            index = focusedEl ? 0 : -1;
+        }
+        else if (currentNodeId) {
+            index = current ? 0 : -1;
+        }
+        else {
+            index = firstNode ? 0 : -1;
+        }
+        return index;
+    }, [focusedNodeId, currentNodeId, current, focusedEl]);
+    const handleToggleClick = useCallback((e) => {
+        onNodeClick?.(id, e);
+        changeFocusedNodeId(id);
+    }, [id, onNodeClick, changeFocusedNodeId]);
+    const onKeyDown = useCallback((e) => {
+        if (['ArrowUp', 'ArrowDown', 'Enter', 'Home', 'End'].includes(e.key))
+            e.preventDefault();
+        switch (e.key) {
+            case 'ArrowUp':
+                changeFocusedNodeId(id, 'up');
+                break;
+            case 'ArrowDown':
+                changeFocusedNodeId(id, 'down');
+                break;
+            case `Arrow${cap(end)}`:
+                if (nodes) {
+                    if (expanded) {
+                        changeFocusedNodeId(id, 'right');
+                    }
+                    else {
+                        handleToggleClick(e);
+                    }
+                }
+                break;
+            case `Arrow${cap(start)}`:
+                if (expanded) {
+                    handleToggleClick(e);
+                }
+                else {
+                    changeFocusedNodeId(id, 'left');
+                }
+                break;
+            case 'Enter':
+                if (onClick) {
+                    onClick(id, e);
+                }
+                else {
+                    handleToggleClick(e);
+                }
+                break;
+            case 'Home':
+                if (firstNodeId)
+                    changeFocusedNodeId(firstNodeId);
+                break;
+            case 'End':
+                if (lastNodeId)
+                    changeFocusedNodeId(lastNodeId);
+                break;
+            default:
+        }
+    }, [id, end, nodes, expanded, actions, firstNodeId, lastNodeId, changeFocusedNodeId]);
+    const actionsJSX = useMemo(() => {
+        return actions ? (
+        // Wrapping in a div since Actions may render a frag of buttons and we need a wrapper for flex space-between.
+        _jsx(StyledNodeActions, { children: _jsx(Actions, { items: actions.map(action => {
+                    return {
+                        ...action,
+                        tabIndex: -1,
+                        onClick: (actionId, e) => {
+                            e.stopPropagation();
+                            action?.onClick?.(actionId, e);
+                        }
+                    };
+                }), menuAt: 3 }, void 0) }, void 0)) : 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));
+        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);
+    }, [
+        id,
+        label,
+        icon,
+        nodes,
+        actions,
+        onClick,
+        onNodeClick,
+        current,
+        focusedEl,
+        tabIndex,
+        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));
+};
+const StandardTree = forwardRef(({ nodes, currentNodeId, onNodeClick, lined = false, ...restProps }, ref) => {
+    const [focusedNodeId, setFocusedNodedId] = useState();
+    const lastNodeId = useMemo(() => {
+        return helpers.getDeepestNode(nodes, nodes[nodes.length - 1].id)?.id;
+    }, [nodes]);
+    const changeFocusedNodeId = useCallback((id, type) => {
+        switch (type) {
+            case 'up': {
+                const previousNode = helpers.getPreviousNode(nodes, id);
+                if (previousNode)
+                    setFocusedNodedId(previousNode.id);
+                break;
+            }
+            case 'down': {
+                const nextNode = helpers.getNextNode(nodes, id);
+                if (nextNode)
+                    setFocusedNodedId(nextNode.id);
+                break;
+            }
+            case 'left': {
+                const parentNode = helpers.getParentNode(nodes, id);
+                if (parentNode)
+                    setFocusedNodedId(parentNode.id);
+                break;
+            }
+            case 'right': {
+                const childNode = helpers.getFirstChildNode(nodes, id);
+                if (childNode)
+                    setFocusedNodedId(childNode.id);
+                break;
+            }
+            default:
+                setFocusedNodedId(id);
+        }
+    }, [nodes]);
+    return (_jsx(StandardTreeContext.Provider, { value: useMemo(() => ({
+            currentNodeId,
+            focusedNodeId,
+            lastNodeId,
+            firstNodeId: nodes[0].id,
+            changeFocusedNodeId,
+            onNodeClick,
+            lined
+        }), [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId]), children: _jsx(StyledStandardTree, { ...restProps, ref: ref, nodes: nodes, nodeRenderer: NodeRenderer }, void 0) }, void 0));
+});
+export default StandardTree;
+//# sourceMappingURL=StandardTree.js.map