@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

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":";AAAA,OAAO,EACL,UAAU,EAKV,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAgC,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AA8BjD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC;aACvD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC;iBACxC,QAAQ,CAAC,GAAG;;eAEd,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,MAAM,EAClB,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,IAAI,EACrB,GAAG,SAAS,EACkB,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAyC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1E,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAc,EAAE,EAAE;QAClC,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;QACjC,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,OAAO,KAAK,MAAM;YAAE,OAAO;QACjE,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,cAAc,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE;YACjD,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;QACD,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,QAAQ,CAAC,aAAa,KAAK,MAAM,EAAE;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,MAAM,EAAE;YACzD,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAEpD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAEhD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACpD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YAEvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YAEnD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,cAAc,EAAE;YACxE,MAAM,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,EAAE,KACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAC,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,aAAa,EACjB,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAC,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,kBAAkB,QAClB,GAAG,EAAE,UAAU,YAEd,QAAQ,WACD,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","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

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

@@ -0,0 +1 @@
+{"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 StandardTree: 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\nexport default StandardTree;\n"]}

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

@@ -0,0 +1,13 @@
+import { StandardTreePropsWithDefaults } from './StandardTree.types';
+export declare const StyledToggleIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLabelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStandardTreeItemSubTree: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StandardTreePropsWithDefaults, "lined">, never>;
+export declare const StyledNodeInteraction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStandardTreeLeaf: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStandardTreeParent: any;
+export declare const StyledStandardTreeNode: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStandardTree: import("styled-components").StyledComponent<(<T extends import("./Tree").TreeNode = import("./Tree").TreeNode>(props: import("./Tree").TreeProps<T> & import("../..").ForwardProps) => JSX.Element | null), import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=StandardTree.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StandardTree.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,gBAAgB,iMAAiB,CAAC;AAE/C,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,iMAAiB,CAAC;AAE7C,eAAO,MAAM,cAAc,0GAAgB,CAAC;AAE5C,eAAO,MAAM,6BAA6B,mJAgCxC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA8ChC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAYjC,CAAC;AAKH,eAAO,MAAM,wBAAwB,EAAE,GA2BrC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAWlC,CAAC;AAIF,eAAO,MAAM,kBAAkB,kQAI9B,CAAC"}

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

@@ -0,0 +1,155 @@
+import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
+import { StyledButton } from '../Button';
+import Icon, { StyledIcon } from '../Icon';
+import { StyledProgressRing } from '../Progress';
+import { defaultThemeProp } from '../../theme';
+import { useDirection } from '../../hooks';
+import Tree, { StyledTreeListItem } from './Tree';
+export const StyledToggleIcon = styled(Icon) ``;
+export const StyledNodeActions = styled.div ``;
+export const StyledLabelContent = styled.div ``;
+export const StyledNodeIcon = styled(Icon) ``;
+export const StyledNodeText = styled.span ``;
+export const StyledStandardTreeItemSubTree = styled.div(({ theme, lined }) => {
+    return css `
+    position: relative;
+
+    ${lined &&
+        css `
+      ::before {
+        content: '';
+        display: block;
+        position: absolute;
+        background-color: currentColor;
+        inset-block-start: -${theme.base.spacing};
+        inset-block-end: 0;
+        inset-inline-start: calc(
+          0.5em * (var(--depth) + 1) + (${theme.base.spacing} * var(--depth) + 0.5em * var(--depth)) +
+            ${theme.base.spacing} * 1.5
+        );
+        width: 0.0625rem;
+        opacity: 0.2;
+        transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      }
+    `}
+
+    ${StyledProgressRing} {
+      margin: calc(${theme.base.spacing} * 1.25) 0;
+      margin-inline-start: calc(
+        var(--parent-caret-width) * (var(--depth) + 1) + var(--initial-padding)
+      );
+    }
+  `;
+});
+StyledStandardTreeItemSubTree.defaultProps = defaultThemeProp;
+export const StyledNodeInteraction = styled.div(({ theme }) => {
+    return css `
+    /* Could put on Flex pad prop but, needing logical prop below, maybe makes sense to keep here.
+     * We should fix Flex/Grid pad arrays to map to logical props...
+     */
+    min-height: 2.25rem;
+    padding-inline-start: calc(var(--parent-caret-width) * var(--depth) + var(--initial-padding));
+    padding-inline-end: var(--initial-padding);
+    cursor: pointer;
+
+    & > ${StyledNodeActions} {
+      display: none;
+      ${StyledButton} {
+        margin-inline-start: calc(${theme.base.spacing} / 2);
+      }
+    }
+
+    &:focus,
+    &:focus-within {
+      box-shadow: ${theme.base.shadow.focus};
+
+      & > ${StyledNodeActions} {
+        display: block;
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:hover {
+      background-color: ${transparentize(0.9, theme.base.palette['foreground-color'])};
+
+      & > ${StyledNodeActions} {
+        display: block;
+      }
+    }
+
+    &[aria-current='true'] {
+      background-color: ${transparentize(0.95, theme.base.palette['foreground-color'])};
+
+      & > ${StyledLabelContent}, & > :first-child > ${StyledLabelContent} {
+        color: ${theme.base.palette.interactive};
+      }
+    }
+  `;
+});
+StyledNodeInteraction.defaultProps = defaultThemeProp;
+export const StyledStandardTreeLeaf = styled.div(() => {
+    return css `
+    ${StyledNodeInteraction} {
+      /* 1 when not at root and no parent sibling, 0 otherwise. */
+      --include-parent-icon-width: min((1 - var(--has-parent-sibling)), var(--depth));
+      padding-inline-start: calc(
+        var(--initial-padding) +
+          (var(--parent-caret-width) * (var(--depth) + var(--has-parent-sibling))) +
+          (var(--parent-icon-width) * var(--include-parent-icon-width))
+      );
+    }
+  `;
+});
+StyledStandardTreeLeaf.defaultProps = defaultThemeProp;
+// FIXME: any is used since typeof StyledNodeInteraction not playing nicely.
+export const StyledStandardTreeParent = styled(StyledNodeInteraction)(({ theme }) => {
+    const { ltr } = useDirection();
+    return css `
+    &[aria-expanded='true'] ${StyledToggleIcon} {
+      transform: rotate(90deg);
+    }
+
+    &[aria-expanded='false'] {
+      ${StyledToggleIcon} {
+        transform: rotate(${ltr ? '0' : '180'}deg);
+      }
+
+      + ${StyledStandardTreeItemSubTree} {
+        display: none;
+      }
+    }
+
+    &:hover + ${StyledStandardTreeItemSubTree}::before {
+      opacity: 0.5;
+    }
+
+    ${StyledToggleIcon} {
+      transition: transform calc(${theme.base.animation.speed} / 2)
+        ${theme.base.animation.timing.ease};
+    }
+  `;
+});
+StyledStandardTreeParent.defaultProps = defaultThemeProp;
+export const StyledStandardTreeNode = styled.div(({ theme }) => css `
+    --initial-padding: calc(${theme.base.spacing} * 2);
+    --parent-caret-width: calc(1em + ${theme.base.spacing});
+    --parent-icon-width: calc(1em + ${theme.base.spacing} / 2);
+
+    ${StyledIcon} {
+      width: 1em;
+      height: 1em;
+    }
+  `);
+StyledStandardTreeNode.defaultProps = defaultThemeProp;
+export const StyledStandardTree = styled(Tree) `
+  ${StyledTreeListItem} {
+    display: block;
+  }
+`;
+// FIXME: We need to determine why styled-component types are "eating" our types.
+StyledStandardTree.defaultProps = defaultThemeProp;
+//# sourceMappingURL=StandardTree.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StandardTree.styles.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { StyledButton } from '../Button';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledProgressRing } from '../Progress';\nimport { defaultThemeProp } from '../../theme';\nimport { useDirection } from '../../hooks';\n\nimport Tree, { StyledTreeListItem } from './Tree';\nimport { StandardTreePropsWithDefaults } from './StandardTree.types';\n\nexport const StyledToggleIcon = styled(Icon)``;\n\nexport const StyledNodeActions = styled.div``;\n\nexport const StyledLabelContent = styled.div``;\n\nexport const StyledNodeIcon = styled(Icon)``;\n\nexport const StyledNodeText = styled.span``;\n\nexport const StyledStandardTreeItemSubTree = styled.div<\n  Pick<StandardTreePropsWithDefaults, 'lined'>\n>(({ theme, lined }) => {\n  return css`\n    position: relative;\n\n    ${lined &&\n    css`\n      ::before {\n        content: '';\n        display: block;\n        position: absolute;\n        background-color: currentColor;\n        inset-block-start: -${theme.base.spacing};\n        inset-block-end: 0;\n        inset-inline-start: calc(\n          0.5em * (var(--depth) + 1) + (${theme.base.spacing} * var(--depth) + 0.5em * var(--depth)) +\n            ${theme.base.spacing} * 1.5\n        );\n        width: 0.0625rem;\n        opacity: 0.2;\n        transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n    `}\n\n    ${StyledProgressRing} {\n      margin: calc(${theme.base.spacing} * 1.25) 0;\n      margin-inline-start: calc(\n        var(--parent-caret-width) * (var(--depth) + 1) + var(--initial-padding)\n      );\n    }\n  `;\n});\n\nStyledStandardTreeItemSubTree.defaultProps = defaultThemeProp;\n\nexport const StyledNodeInteraction = styled.div(({ theme }) => {\n  return css`\n    /* Could put on Flex pad prop but, needing logical prop below, maybe makes sense to keep here.\n     * We should fix Flex/Grid pad arrays to map to logical props...\n     */\n    min-height: 2.25rem;\n    padding-inline-start: calc(var(--parent-caret-width) * var(--depth) + var(--initial-padding));\n    padding-inline-end: var(--initial-padding);\n    cursor: pointer;\n\n    & > ${StyledNodeActions} {\n      display: none;\n      ${StyledButton} {\n        margin-inline-start: calc(${theme.base.spacing} / 2);\n      }\n    }\n\n    &:focus,\n    &:focus-within {\n      box-shadow: ${theme.base.shadow.focus};\n\n      & > ${StyledNodeActions} {\n        display: block;\n      }\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:hover {\n      background-color: ${transparentize(0.9, theme.base.palette['foreground-color'])};\n\n      & > ${StyledNodeActions} {\n        display: block;\n      }\n    }\n\n    &[aria-current='true'] {\n      background-color: ${transparentize(0.95, theme.base.palette['foreground-color'])};\n\n      & > ${StyledLabelContent}, & > :first-child > ${StyledLabelContent} {\n        color: ${theme.base.palette.interactive};\n      }\n    }\n  `;\n});\n\nStyledNodeInteraction.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeLeaf = styled.div(() => {\n  return css`\n    ${StyledNodeInteraction} {\n      /* 1 when not at root and no parent sibling, 0 otherwise. */\n      --include-parent-icon-width: min((1 - var(--has-parent-sibling)), var(--depth));\n      padding-inline-start: calc(\n        var(--initial-padding) +\n          (var(--parent-caret-width) * (var(--depth) + var(--has-parent-sibling))) +\n          (var(--parent-icon-width) * var(--include-parent-icon-width))\n      );\n    }\n  `;\n});\n\nStyledStandardTreeLeaf.defaultProps = defaultThemeProp;\n\n// FIXME: any is used since typeof StyledNodeInteraction not playing nicely.\nexport const StyledStandardTreeParent: any = styled(StyledNodeInteraction)(({ theme }) => {\n  const { ltr } = useDirection();\n\n  return css`\n    &[aria-expanded='true'] ${StyledToggleIcon} {\n      transform: rotate(90deg);\n    }\n\n    &[aria-expanded='false'] {\n      ${StyledToggleIcon} {\n        transform: rotate(${ltr ? '0' : '180'}deg);\n      }\n\n      + ${StyledStandardTreeItemSubTree} {\n        display: none;\n      }\n    }\n\n    &:hover + ${StyledStandardTreeItemSubTree}::before {\n      opacity: 0.5;\n    }\n\n    ${StyledToggleIcon} {\n      transition: transform calc(${theme.base.animation.speed} / 2)\n        ${theme.base.animation.timing.ease};\n    }\n  `;\n});\n\nStyledStandardTreeParent.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeNode = styled.div(\n  ({ theme }) => css`\n    --initial-padding: calc(${theme.base.spacing} * 2);\n    --parent-caret-width: calc(1em + ${theme.base.spacing});\n    --parent-icon-width: calc(1em + ${theme.base.spacing} / 2);\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n    }\n  `\n);\n\nStyledStandardTreeNode.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTree = styled(Tree)`\n  ${StyledTreeListItem} {\n    display: block;\n  }\n`;\n// FIXME: We need to determine why styled-component types are \"eating\" our types.\n(StyledStandardTree as typeof Tree & { defaultProps: object }).defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,25 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
+import type { Action, PropsWithDefaults } from '../../types';
+import type { TreeProps, TreeNode } from './Tree';
+export interface StandardTreeNode extends TreeNode {
+    nodes?: StandardTreeNode[];
+    label: string;
+    icon?: string;
+    expanded?: boolean;
+    loading?: boolean;
+    actions?: Action[];
+    onClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+}
+export interface StandardTreeProps extends TreeProps<StandardTreeNode> {
+    currentNodeId?: TreeNode['id'];
+    lined?: boolean;
+    onNodeClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+}
+export interface StandardTreeContextProps extends StandardTreeProps {
+    firstNodeId?: TreeNode['id'];
+    lastNodeId?: TreeNode['id'];
+    focusedNodeId?: TreeNode['id'];
+    changeFocusedNodeId: (id: TreeNode['id'], type?: 'up' | 'down' | 'left' | 'right') => void;
+}
+export declare type StandardTreePropsWithDefaults = PropsWithDefaults<StandardTreeContextProps, 'lined'>;
+//# sourceMappingURL=StandardTree.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StandardTree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElD,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACjG;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACpE,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CACZ,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAClB,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KACpD,IAAI,CAAC;CACX;AAED,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,WAAW,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,mBAAmB,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAC5F;AAED,oBAAY,6BAA6B,GAAG,iBAAiB,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=StandardTree.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StandardTree.types.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, KeyboardEvent } from 'react';\n\nimport type { Action, PropsWithDefaults } from '../../types';\n\nimport type { TreeProps, TreeNode } from './Tree';\n\nexport interface StandardTreeNode extends TreeNode {\n  nodes?: StandardTreeNode[];\n  label: string;\n  icon?: string;\n  expanded?: boolean;\n  loading?: boolean;\n  actions?: Action[];\n  onClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface StandardTreeProps extends TreeProps<StandardTreeNode> {\n  currentNodeId?: TreeNode['id'];\n  lined?: boolean;\n  onNodeClick?: (\n    id: TreeNode['id'],\n    e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>\n  ) => void;\n}\n\nexport interface StandardTreeContextProps extends StandardTreeProps {\n  firstNodeId?: TreeNode['id'];\n  lastNodeId?: TreeNode['id'];\n  focusedNodeId?: TreeNode['id'];\n  changeFocusedNodeId: (id: TreeNode['id'], type?: 'up' | 'down' | 'left' | 'right') => void;\n}\n\nexport type StandardTreePropsWithDefaults = PropsWithDefaults<StandardTreeContextProps, 'lined'>;\n"]}