@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/toolbar/overflow-panel/OverflowSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowSeparator.js","sources":["../src/toolbar/overflow-panel/OverflowSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport \"./OverflowSeparator.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowSeparator\");\n\nexport interface OverflowSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  children?: never;\n  focusable?: boolean;\n}\n\nexport const OverflowSeparator = (\n  props: OverflowSeparatorProps\n): ReactElement => {\n  const { className, focusable, ...rest } = props;\n  return <div className={cx(withBaseName(), className)} {...rest} />;\n};\n\nOverflowSeparator.defaultProps = {\n  focusable: false,\n};\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAO5C,MAAA,iBAAA,GAAoB,CAC/B,KACiB,KAAA;AACjB,EAAA,MAAM,EAAE,SAAA,EAAW,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1C,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,GAAM,CAAA,CAAA;AAClE,EAAA;AAEA,iBAAA,CAAkB,YAAe,GAAA;AAAA,EAC/B,SAAW,EAAA,KAAA;AACb,CAAA;;;;"}

package/dist-es/packages/lab/src/toolbar/toolbar-field/ToolbarField.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useToolbarField } from './useToolbarField.js';
+import { FormField } from '../../form-field/FormField.js';
+import '../../form-field/FormLabel.js';
+
+const ToolbarField = forwardRef(function ToolbarField2(props, forwardedRef) {
+  const toolbarFieldProps = useToolbarField(props);
+  return /* @__PURE__ */ jsx(FormField, {
+    ...toolbarFieldProps,
+    ref: forwardedRef
+  });
+});
+ToolbarField.displayName = "ToolbarField";
+
+export { ToolbarField };
+//# sourceMappingURL=ToolbarField.js.map

package/dist-es/packages/lab/src/toolbar/toolbar-field/ToolbarField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarField.js","sources":["../src/toolbar/toolbar-field/ToolbarField.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from \"react\";\nimport { ToolbarFieldProps } from \"./toolbarFieldTypes\";\nimport { useToolbarField } from \"./useToolbarField\";\n\nimport { FormField } from \"../../form-field\";\n\nexport const ToolbarField = forwardRef(function ToolbarField(\n  props: ToolbarFieldProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const toolbarFieldProps = useToolbarField(props);\n  return <FormField {...toolbarFieldProps} ref={forwardedRef} />;\n});\n\nToolbarField.displayName = \"ToolbarField\";\n"],"names":["ToolbarField"],"mappings":";;;;;;AAMO,MAAM,YAAe,GAAA,UAAA,CAAW,SAASA,aAAAA,CAC9C,OACA,YACA,EAAA;AACA,EAAM,MAAA,iBAAA,GAAoB,gBAAgB,KAAK,CAAA,CAAA;AAC/C,EAAA,uBAAQ,GAAA,CAAA,SAAA,EAAA;AAAA,IAAW,GAAG,iBAAA;AAAA,IAAmB,GAAK,EAAA,YAAA;AAAA,GAAc,CAAA,CAAA;AAC9D,CAAC,EAAA;AAED,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}

package/dist-es/packages/lab/src/toolbar/toolbar-field/useToolbarField.js

@@ -0,0 +1,78 @@
+import cx from 'classnames';
+import { isValidElement, useCallback } from 'react';
+import { ToolbarButton } from '../ToolbarButton.js';
+
+const NullActivationIndicator = () => null;
+const primaryControls = ["Dropdown", "Input"];
+const getChildElementName = (element) => {
+  if (isValidElement(element)) {
+    const { type } = element;
+    if (typeof type === "string") {
+      return type;
+    } else if (typeof type.name === "string") {
+      return type.name;
+    } else if ("displayName" in type) {
+      return type.displayName;
+    } else {
+      return "";
+    }
+  } else {
+    throw Error(
+      "useToolbarField, child of ToolbarField is not valid ReactElememnt"
+    );
+  }
+};
+const isToolbarButton = (element) => isValidElement(element) && element.type === ToolbarButton;
+const getToolbarFormFieldProps = (child, isOverflowPanel = false) => {
+  let activationIndicator = NullActivationIndicator;
+  let variant = "tertiary";
+  const element = child;
+  if (isValidElement(element)) {
+    const name = getChildElementName(element);
+    if (primaryControls.includes(name)) {
+      activationIndicator = void 0;
+      variant = "primary";
+    }
+  }
+  return {
+    ActivationIndicatorComponent: activationIndicator,
+    className: cx({
+      "saltFormField-toolbarButton": isOverflowPanel && isToolbarButton(element),
+      [`saltFormField-${variant}`]: variant
+    }),
+    fullWidth: false
+  };
+};
+const InteractiveComponents = ["Input", "Dropdown"];
+const useToolbarField = (props) => {
+  const {
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp,
+    className: classNameProp,
+    inOverflowPanel,
+    labelPlacement: labelPlacementProp,
+    onClick,
+    ...rest
+  } = props;
+  const childElementName = getChildElementName(props.children);
+  const { className, ActivationIndicatorComponent, ...calculatedProps } = getToolbarFormFieldProps(props.children, inOverflowPanel);
+  const labelPlacement = labelPlacementProp != null ? labelPlacementProp : inOverflowPanel ? "top" : "left";
+  const handleClick = useCallback(
+    (e) => {
+      if (onClick && !InteractiveComponents.includes(childElementName)) {
+        onClick(e);
+      }
+    },
+    [childElementName, onClick]
+  );
+  return {
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp != null ? ActivationIndicatorComponentProp : ActivationIndicatorComponent,
+    className: cx("saltToolbarField", classNameProp, className),
+    labelPlacement,
+    onClick: handleClick,
+    ...rest,
+    ...calculatedProps
+  };
+};
+
+export { getToolbarFormFieldProps, useToolbarField };
+//# sourceMappingURL=useToolbarField.js.map

package/dist-es/packages/lab/src/toolbar/toolbar-field/useToolbarField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarField.js","sources":["../src/toolbar/toolbar-field/useToolbarField.ts"],"sourcesContent":["import cx from \"classnames\";\nimport {\n  isValidElement,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport { ToolbarButton } from \"../ToolbarButton\";\nimport { ToolbarFieldProps } from \"./toolbarFieldTypes\";\n\ntype TypeWithDisplayName = { displayName: string };\ntype ActivationIndicator = ToolbarFieldProps[\"ActivationIndicatorComponent\"];\ntype ToolbarFormFieldVariant = \"primary\" | \"tertiary\";\n\nconst NullActivationIndicator = () => null;\nconst primaryControls = [\"Dropdown\", \"Input\"];\n\nconst getChildElementName = (element: ReactNode): string => {\n  if (isValidElement(element)) {\n    const { type } = element;\n    if (typeof type === \"string\") {\n      return type;\n    } else if (typeof type.name === \"string\") {\n      return type.name;\n    } else if (\"displayName\" in type) {\n      return (type as TypeWithDisplayName).displayName;\n    } else {\n      return \"\";\n    }\n  } else {\n    throw Error(\n      \"useToolbarField, child of ToolbarField is not valid ReactElememnt\"\n    );\n  }\n};\n\n// ToolbarButton gets special styling treatment in the OverflowPanel but styling is\n// applied to the FormField, so we need to target those FormFields hosting ToolbarButtons.\nconst isToolbarButton = (element: ReactElement): boolean =>\n  isValidElement(element) && element.type === ToolbarButton;\n\n// Some props for Toolbar FormFields depend on the control hosted by\n// the FormField.\nexport const getToolbarFormFieldProps = (\n  child: ReactNode,\n  isOverflowPanel = false\n): ToolbarFieldProps => {\n  let activationIndicator: ActivationIndicator = NullActivationIndicator;\n  let variant: ToolbarFormFieldVariant = \"tertiary\";\n  const element = child as ReactElement;\n  if (isValidElement(element)) {\n    const name = getChildElementName(element);\n    if (primaryControls.includes(name)) {\n      activationIndicator = undefined;\n      variant = \"primary\";\n    }\n  }\n  return {\n    ActivationIndicatorComponent: activationIndicator,\n    className: cx({\n      \"saltFormField-toolbarButton\":\n        isOverflowPanel && isToolbarButton(element),\n      [`saltFormField-${variant}`]: variant,\n    }),\n    fullWidth: false,\n  };\n};\n\n// Eventually this list needs to be configurable at the Toolbar level\nconst InteractiveComponents = [\"Input\", \"Dropdown\"];\n\nexport const useToolbarField = (\n  props: ToolbarFieldProps\n): ToolbarFieldProps => {\n  const {\n    ActivationIndicatorComponent: ActivationIndicatorComponentProp,\n    className: classNameProp,\n    inOverflowPanel,\n    labelPlacement: labelPlacementProp,\n    onClick,\n    ...rest\n  } = props;\n\n  const childElementName = getChildElementName(props.children);\n  const { className, ActivationIndicatorComponent, ...calculatedProps } =\n    getToolbarFormFieldProps(props.children, inOverflowPanel);\n\n  const labelPlacement =\n    labelPlacementProp ?? (inOverflowPanel ? \"top\" : \"left\");\n\n  // disableFocusRing ???\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (onClick && !InteractiveComponents.includes(childElementName)) {\n        onClick(e);\n      }\n    },\n    [childElementName, onClick]\n  );\n  return {\n    ActivationIndicatorComponent:\n      ActivationIndicatorComponentProp ?? ActivationIndicatorComponent,\n    className: cx(\"saltToolbarField\", classNameProp, className),\n    labelPlacement,\n    onClick: handleClick,\n    ...rest,\n    ...calculatedProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/tooltip/Tooltip.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-fontSize: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  --tooltip-lineHeight: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  font-size: var(--tooltip-fontSize);\n  line-height: var(--tooltip-lineHeight);\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n.saltTooltip[data-placement^=\"top\"] {\n  transform-origin: bottom;\n}\n\n.saltTooltip[data-placement^=\"bottom\"] {\n  transform-origin: top;\n}\n\n.saltTooltip[data-placement^=\"left\"] {\n  transform-origin: right;\n}\n\n.saltTooltip[data-placement^=\"right\"] {\n  transform-origin: left;\n}\n\n/* Styles applied to inner content */\n.saltTooltip-content {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n/* Styles applied to body */\n.saltTooltip-body {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  margin-right: var(--saltTooltip-icon-marginRight, 6px);\n  vertical-align: top;\n}\n\n/* Styles applied to Tooltip arrow */\n.saltTooltip-arrow,\n.saltTooltip-arrow::after {\n  border: var(--salt-size-sharktooth-height) solid transparent;\n  position: absolute;\n}\n\n.saltTooltip-arrow::after {\n  content: \"\";\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow {\n  border-top-color: var(--tooltip-status-borderColor);\n  bottom: -11px;\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow {\n  border-bottom-color: var(--tooltip-status-borderColor);\n  top: -11px;\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow {\n  border-left-color: var(--tooltip-status-borderColor);\n  right: -11px;\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow {\n  border-right-color: var(--tooltip-status-borderColor);\n  left: -11px;\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow::after {\n  border-top-color: var(--tooltip-background);\n  bottom: -4px;\n  left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow::after {\n  border-bottom-color: var(--tooltip-background);\n  top: -4px;\n  left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow::after {\n  border-left-color: var(--tooltip-background);\n  right: -4px;\n  top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow::after {\n  border-right-color: var(--tooltip-background);\n  left: -4px;\n  top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Tooltip.css.js.map

package/dist-es/packages/lab/src/tooltip/Tooltip.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/tooltip/Tooltip.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef, useCallback } from 'react';
+import { Portal } from '../portal/Portal.js';
+import { makePrefixer, StatusIndicator } from '@salt-ds/core';
+import { useWindow } from '../window/WindowContext.js';
+import '../window/ElectronWindow.js';
+import './Tooltip.css.js';
+
+const withBaseName = makePrefixer("saltTooltip");
+const Tooltip = forwardRef(
+  function Tooltip2({
+    arrowProps,
+    children,
+    className: classNameProp,
+    container,
+    disablePortal,
+    hideArrow,
+    hideIcon,
+    open,
+    render,
+    status = "info",
+    title,
+    ...rest
+  }, ref) {
+    const getIcon = useCallback(
+      (iconProps) => {
+        if (hideIcon) {
+          return null;
+        }
+        return status !== "info" ? /* @__PURE__ */ jsx(StatusIndicator, {
+          status,
+          ...iconProps,
+          className: withBaseName("icon")
+        }) : null;
+      },
+      [status, hideIcon]
+    );
+    const Window = useWindow();
+    if (!open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Portal, {
+      disablePortal,
+      container,
+      children: /* @__PURE__ */ jsxs(Window, {
+        className: cx(withBaseName(), withBaseName(status)),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: withBaseName("content"),
+            children: render ? render({
+              Icon: (passedProps) => getIcon(passedProps),
+              getIconProps: () => ({
+                status,
+                className: withBaseName("icon")
+              })
+            }) : /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                getIcon({}),
+                /* @__PURE__ */ jsx("span", {
+                  className: withBaseName("body"),
+                  children: title
+                })
+              ]
+            })
+          }),
+          !hideArrow && /* @__PURE__ */ jsx("div", {
+            className: withBaseName("arrow"),
+            ...arrowProps
+          })
+        ]
+      })
+    });
+  }
+);
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist-es/packages/lab/src/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport cn from \"classnames\";\nimport {\n  ComponentProps,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport { Portal, PortalProps } from \"../portal\";\nimport { makePrefixer, StatusIndicator } from \"@salt-ds/core\";\nimport { useWindow } from \"../window\";\n\nimport \"./Tooltip.css\";\n\n// Keep in order of preference. First items are used as default\n\nexport type TooltipStatus = \"error\" | \"info\" | \"success\" | \"warning\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\n// FIXME: Fix types\nexport interface TooltipRenderProp {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  Icon: any; // typeof Icon;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getIconProps: any; // StateAndPropGetterFunction<IconProps>;\n}\n\nexport interface TooltipProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"title\">,\n    Pick<PortalProps, \"disablePortal\" | \"container\"> {\n  arrowProps?: ComponentProps<\"div\">;\n  /**\n   * Removes the tooltip arrow.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide a state icon within the tooltip\n   */\n  hideIcon?: boolean;\n  /**\n   * A callback function to render the tooltip content\n   * @param {function} getIcon getter for the icon based on the state\n   * @param {function} getIconProps getter for the icon properties\n   */\n  render?: (props: TooltipRenderProp) => ReactNode;\n  /**\n   * A string to determine the current status of the tooltip\n   */\n  status?: TooltipStatus;\n  title?: string;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n  open?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(\n    {\n      arrowProps,\n      children,\n      className: classNameProp,\n      container,\n      disablePortal,\n      hideArrow,\n      hideIcon,\n      open,\n      render,\n      status = \"info\",\n      title,\n      ...rest\n    },\n    ref\n  ) {\n    const getIcon = useCallback(\n      (iconProps: IconProps) => {\n        if (hideIcon) {\n          return null;\n        }\n        return status !== \"info\" ? (\n          <StatusIndicator\n            status={status}\n            {...iconProps}\n            className={withBaseName(\"icon\")}\n          />\n        ) : null;\n      },\n      [status, hideIcon]\n    );\n\n    const Window = useWindow();\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <Portal disablePortal={disablePortal} container={container}>\n        <Window\n          className={cn(withBaseName(), withBaseName(status))}\n          ref={ref}\n          {...rest}\n        >\n          <div className={withBaseName(\"content\")}>\n            {render ? (\n              render({\n                Icon: (passedProps: IconProps) => getIcon(passedProps),\n                getIconProps: () => ({\n                  status,\n                  className: withBaseName(\"icon\"),\n                }),\n              })\n            ) : (\n              <>\n                {getIcon({})}\n                <span className={withBaseName(\"body\")}>{title}</span>\n              </>\n            )}\n          </div>\n          {!hideArrow && (\n            <div className={withBaseName(\"arrow\")} {...arrowProps} />\n          )}\n        </Window>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tooltip","cn"],"mappings":";;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAyCxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QACP,CAAA;AAAA,IACE,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,SAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,OAAU,GAAA,WAAA;AAAA,MACd,CAAC,SAAyB,KAAA;AACxB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,MAAA,KAAW,yBACf,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,MAAA;AAAA,UACC,GAAG,SAAA;AAAA,UACJ,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAChC,CACE,GAAA,IAAA,CAAA;AAAA,OACN;AAAA,MACA,CAAC,QAAQ,QAAQ,CAAA;AAAA,KACnB,CAAA;AAEA,IAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MAAO,aAAA;AAAA,MAA8B,SAAA;AAAA,MACpC,QAAC,kBAAA,IAAA,CAAA,MAAA,EAAA;AAAA,QACC,WAAWC,EAAG,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,MAAM,CAAC,CAAA;AAAA,QAClD,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YACnC,mBACC,MAAO,CAAA;AAAA,cACL,IAAM,EAAA,CAAC,WAA2B,KAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,cACrD,cAAc,OAAO;AAAA,gBACnB,MAAA;AAAA,gBACA,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,eAChC,CAAA;AAAA,aACD,CAED,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,cACG,QAAA,EAAA;AAAA,gBAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,gCACV,GAAA,CAAA,MAAA,EAAA;AAAA,kBAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,kBAAI,QAAA,EAAA,KAAA;AAAA,iBAAM,CAAA;AAAA,eAAA;AAAA,aAChD,CAAA;AAAA,WAEJ,CAAA;AAAA,UACC,CAAC,6BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,GAAG,UAAA;AAAA,WAAY,CAAA;AAAA,SAAA;AAAA,OAE3D,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/tooltip/TooltipContext.js

@@ -0,0 +1,21 @@
+import { createContext, useContext, useDebugValue } from 'react';
+import { Tooltip } from './Tooltip.js';
+
+const TooltipContext = createContext(
+  void 0
+);
+const useTooltipContext = () => {
+  const context = useContext(TooltipContext) || {};
+  useDebugValue(
+    `${context && context.Tooltip !== void 0 ? "Customized" : "Default Salt"} Tooltip.`
+  );
+  return {
+    Tooltip: Tooltip,
+    enterDelay: context.enterDelay || 1500,
+    leaveDelay: context.leaveDelay || 0,
+    placement: context.placement || "top"
+  };
+};
+
+export { TooltipContext, useTooltipContext };
+//# sourceMappingURL=TooltipContext.js.map

package/dist-es/packages/lab/src/tooltip/TooltipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContext.js","sources":["../src/tooltip/TooltipContext.ts"],"sourcesContent":["import { createContext, ComponentType, useContext, useDebugValue } from \"react\";\nimport { Tooltip as SaltTooltip, TooltipProps } from \"./Tooltip\";\nimport { UseTooltipProps } from \"./useTooltip\";\n\n// TODO see also below. what is the intention od the context.toolTip - that users can supply\n// a component or an element\nexport interface TooltipContextProps {\n  // TODO: We should relax the constraint of prop so that custom Tooltip conforming to a simpler API will work\n  Tooltip?: ComponentType<TooltipProps>;\n  enterDelay?: number;\n  leaveDelay?: number;\n  placement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TooltipContext = createContext<TooltipContextProps | undefined>(\n  undefined\n);\n\n/**\n * TODO: Probably move this to Tooltip packages so it can be reused?\n *\n * Provide defaults for Tooltip config so that we can maintain the consistency\n * if no customized override is provided\n */\nexport const useTooltipContext = () => {\n  const context: TooltipContextProps = useContext(TooltipContext) || {};\n\n  useDebugValue(\n    `${\n      context && context.Tooltip !== undefined ? \"Customized\" : \"Default Salt\"\n    } Tooltip.`\n  );\n\n  // TODO what is the intention od the context.toolTip - that users can supply\n  // a component or an element\n  return {\n    Tooltip: /* context.Tooltip ||*/ SaltTooltip,\n    enterDelay: context.enterDelay || 1500,\n    leaveDelay: context.leaveDelay || 0,\n    placement: context.placement || \"top\",\n  };\n};\n"],"names":["SaltTooltip"],"mappings":";;;AAcO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,KAAA,CAAA;AACF,EAAA;AAQO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,OAA+B,GAAA,UAAA,CAAW,cAAc,CAAA,IAAK,EAAC,CAAA;AAEpE,EAAA,aAAA;AAAA,IACE,CACE,EAAA,OAAA,IAAW,OAAQ,CAAA,OAAA,KAAY,SAAY,YAAe,GAAA,cAAA,CAAA,SAAA,CAAA;AAAA,GAE9D,CAAA;AAIA,EAAO,OAAA;AAAA,IACL,OAAiC,EAAAA,OAAA;AAAA,IACjC,UAAA,EAAY,QAAQ,UAAc,IAAA,IAAA;AAAA,IAClC,UAAA,EAAY,QAAQ,UAAc,IAAA,CAAA;AAAA,IAClC,SAAA,EAAW,QAAQ,SAAa,IAAA,KAAA;AAAA,GAClC,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/tooltip/useAriaAnnounce.js

@@ -0,0 +1,83 @@
+import { useRef, useEffect } from 'react';
+import { useAriaAnnouncer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+
+function getDocument(floating) {
+  var _a;
+  return (_a = floating == null ? void 0 : floating.ownerDocument) != null ? _a : document;
+}
+function getWindow(value) {
+  var _a;
+  return (_a = getDocument(value).defaultView) != null ? _a : window;
+}
+function isElement(value) {
+  return value ? value instanceof getWindow(value).Element : false;
+}
+function getDelay(value, prop, pointerType) {
+  if (pointerType && pointerType !== "mouse") {
+    return 0;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  return value == null ? void 0 : value[prop];
+}
+const useAriaAnnounce = (context, { delay = 0 }) => {
+  const { open, dataRef, refs } = context;
+  const pointerTypeRef = useRef();
+  const timeoutRef = useRef();
+  const blockMouseMoveRef = useRef(true);
+  const { announce } = useAriaAnnouncer();
+  useIsomorphicLayoutEffect(() => {
+    if (!open) {
+      pointerTypeRef.current = void 0;
+    }
+  });
+  useEffect(() => {
+    const reference = refs.reference.current;
+    function announceFloating() {
+      var _a;
+      const tooltipContent = (_a = refs.floating.current) == null ? void 0 : _a.innerText;
+      if (tooltipContent) {
+        announce(tooltipContent);
+      }
+    }
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      if (open) {
+        return;
+      }
+      blockMouseMoveRef.current = false;
+      dataRef.current.openEvent = event;
+      if (delay) {
+        timeoutRef.current = window.setTimeout(() => {
+          announceFloating();
+        }, getDelay(delay, "open", pointerTypeRef.current));
+      } else {
+        announceFloating();
+      }
+    }
+    if (isElement(reference)) {
+      reference.addEventListener("mouseenter", onMouseEnter);
+      return () => {
+        reference.removeEventListener("mouseenter", onMouseEnter);
+      };
+    }
+  }, [dataRef, delay, open, refs.reference, refs.floating, announce]);
+  function setPointerRef(event) {
+    pointerTypeRef.current = event.pointerType;
+  }
+  return {
+    reference: {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef
+    },
+    floating: {
+      onMouseEnter() {
+        clearTimeout(timeoutRef.current);
+      }
+    }
+  };
+};
+
+export { useAriaAnnounce };
+//# sourceMappingURL=useAriaAnnounce.js.map

package/dist-es/packages/lab/src/tooltip/useAriaAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type {\n  ElementProps,\n  FloatingContext,\n} from \"@floating-ui/react-dom-interactions\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nfunction getDocument(floating: HTMLElement | null) {\n  return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n  return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n  return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n  value: Props[\"delay\"],\n  prop: \"open\" | \"close\",\n  pointerType?: PointerEvent[\"pointerType\"]\n) {\n  if (pointerType && pointerType !== \"mouse\") {\n    return 0;\n  }\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  return value?.[prop];\n}\n\ntype Props = {\n  delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n  context: FloatingContext,\n  { delay = 0 }: Props\n): ElementProps => {\n  const { open, dataRef, refs } = context;\n\n  const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n  const timeoutRef = useRef<number>();\n  const blockMouseMoveRef = useRef(true);\n  const { announce } = useAriaAnnouncer();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      pointerTypeRef.current = undefined;\n    }\n  });\n\n  useEffect(() => {\n    const reference = refs.reference.current;\n    function announceFloating() {\n      const tooltipContent = refs.floating.current?.innerText;\n\n      if (tooltipContent) {\n        announce(tooltipContent);\n      }\n    }\n\n    function onMouseEnter(event: MouseEvent) {\n      clearTimeout(timeoutRef.current);\n\n      if (open) {\n        return;\n      }\n\n      blockMouseMoveRef.current = false;\n      dataRef.current.openEvent = event;\n\n      if (delay) {\n        timeoutRef.current = window.setTimeout(() => {\n          announceFloating();\n        }, getDelay(delay, \"open\", pointerTypeRef.current));\n      } else {\n        announceFloating();\n      }\n    }\n\n    if (isElement(reference)) {\n      reference.addEventListener(\"mouseenter\", onMouseEnter);\n      return () => {\n        reference.removeEventListener(\"mouseenter\", onMouseEnter);\n      };\n    }\n  }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n  function setPointerRef(event: PointerEvent) {\n    pointerTypeRef.current = event.pointerType;\n  }\n\n  return {\n    reference: {\n      onPointerDown: setPointerRef,\n      onPointerEnter: setPointerRef,\n    },\n    floating: {\n      onMouseEnter() {\n        clearTimeout(timeoutRef.current);\n      },\n    },\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/tooltip/useTooltip.js

@@ -0,0 +1,133 @@
+import { useFloatingUI } from '../popper/useFloatingUI.js';
+import { arrow, offset, flip, shift, limitShift, useInteractions, useHover, safePolygon, useFocus, useRole, useDismiss } from '@floating-ui/react-dom-interactions';
+import { useAriaAnnounce } from './useAriaAnnounce.js';
+import { useControlled, margin } from '@salt-ds/core';
+import { useRef, useCallback } from 'react';
+import { isDesktop } from '../window/WindowContext.js';
+import '../window/ElectronWindow.js';
+
+function useTooltip(props) {
+  const {
+    enterDelay = 100,
+    leaveDelay = 0,
+    open: openProp,
+    onOpenChange,
+    placement: placementProp = "right",
+    disabled,
+    disableHoverListener,
+    disableFocusListener
+  } = props || {};
+  const arrowRef = useRef(null);
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: false,
+    name: "Tooltip",
+    state: "open"
+  });
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChange == null ? void 0 : onOpenChange(open2);
+  };
+  const middleware = isDesktop ? [margin(8), arrow({ element: arrowRef })] : [
+    offset(8),
+    flip(),
+    shift({
+      limiter: limitShift({
+        offset: () => {
+          var _a, _b, _c, _d;
+          return Math.max(
+            (_b = (_a = arrowRef.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0,
+            (_d = (_c = arrowRef.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0
+          );
+        }
+      })
+    }),
+    arrow({ element: arrowRef })
+  ];
+  const {
+    floating,
+    reference,
+    x,
+    y,
+    strategy,
+    update,
+    middlewareData,
+    placement,
+    context
+  } = useFloatingUI({
+    open,
+    onOpenChange: handleOpenChange,
+    placement: placementProp,
+    middleware
+  });
+  const handleArrowRef = useCallback(
+    (node) => {
+      arrowRef.current = node;
+      update();
+    },
+    [update]
+  );
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context, {
+      delay: {
+        open: enterDelay,
+        close: leaveDelay
+      },
+      enabled: !disableHoverListener,
+      handleClose: isDesktop ? null : safePolygon()
+    }),
+    useFocus(context, { enabled: !disableFocusListener }),
+    useRole(context, { role: "tooltip" }),
+    useDismiss(context, { ancestorScroll: true }),
+    useAriaAnnounce(context, {
+      delay: {
+        open: enterDelay,
+        close: leaveDelay
+      }
+    })
+  ]);
+  const getTooltipProps = (userProps) => {
+    var _a, _b, _c, _d;
+    const arrowProps = {
+      ref: handleArrowRef,
+      style: {
+        left: (_b = (_a = middlewareData.arrow) == null ? void 0 : _a.x) != null ? _b : "",
+        top: (_d = (_c = middlewareData.arrow) == null ? void 0 : _c.y) != null ? _d : ""
+      }
+    };
+    return {
+      arrowProps,
+      open,
+      ...getFloatingProps({
+        "data-placement": placement,
+        ...userProps,
+        ref: floating,
+        style: {
+          top: y != null ? y : "",
+          left: x != null ? x : "",
+          position: strategy,
+          ...(userProps == null ? void 0 : userProps.style) || {}
+        }
+      })
+    };
+  };
+  const getTriggerProps = (userProps) => {
+    return getReferenceProps({
+      ...userProps,
+      ref: reference
+    });
+  };
+  if (disabled) {
+    return {
+      getTooltipProps: (args) => args,
+      getTriggerProps: (args) => args
+    };
+  }
+  return {
+    getTooltipProps,
+    getTriggerProps
+  };
+}
+
+export { useTooltip };
+//# sourceMappingURL=useTooltip.js.map

package/dist-es/packages/lab/src/tooltip/useTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import { useFloatingUI, UseFloatingUIProps } from \"../popper\";\nimport {\n  arrow,\n  flip,\n  limitShift,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react-dom-interactions\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\nimport { margin, useControlled } from \"@salt-ds/core\";\nimport {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  JSXElementConstructor,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { isDesktop } from \"../window\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  disabled?: boolean;\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay = 100,\n    leaveDelay = 0,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp = \"right\",\n    disabled,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const middleware = isDesktop\n    ? [margin(8), arrow({ element: arrowRef })]\n    : [\n        offset(8),\n        flip(),\n        shift({\n          limiter: limitShift({\n            offset: () =>\n              Math.max(\n                arrowRef.current?.offsetWidth ?? 0,\n                arrowRef.current?.offsetHeight ?? 0\n              ),\n          }),\n        }),\n        arrow({ element: arrowRef }),\n      ];\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    update,\n    middlewareData,\n    placement,\n    context,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware,\n  });\n\n  const handleArrowRef = useCallback(\n    (node: HTMLDivElement) => {\n      arrowRef.current = node;\n      update();\n    },\n    [update]\n  );\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: isDesktop ? null : safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context, { ancestorScroll: true }),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const getTooltipProps = (userProps?: TooltipProps): TooltipProps => {\n    const arrowProps = {\n      ref: handleArrowRef,\n      style: {\n        left: middlewareData.arrow?.x ?? \"\",\n        top: middlewareData.arrow?.y ?? \"\",\n      },\n    };\n\n    return {\n      arrowProps,\n      open,\n      ...getFloatingProps({\n        // @ts-ignore\n        \"data-placement\": placement,\n        ...userProps,\n        ref: floating,\n        style: {\n          top: y ?? \"\",\n          left: x ?? \"\",\n          position: strategy,\n          ...(userProps?.style || {}),\n        },\n      }),\n    } as TooltipProps;\n  };\n\n  const getTriggerProps = <\n    Element extends\n      | keyof JSX.IntrinsicElements\n      // TODO: whether restrict `any`\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      | JSXElementConstructor<any> = \"div\"\n  >(\n    userProps?: ComponentPropsWithoutRef<Element>\n  ) => {\n    // FIXME: types from useInteractions\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n    return getReferenceProps({\n      ...userProps,\n      ref: reference,\n    }) as ComponentPropsWithRef<Element>;\n  };\n\n  if (disabled) {\n    return {\n      getTooltipProps: (args?: TooltipProps) => args,\n      getTriggerProps: <\n        Element extends\n          | keyof JSX.IntrinsicElements\n          // TODO: whether restrict `any`\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          | JSXElementConstructor<any> = \"div\"\n      >(\n        args?: ComponentPropsWithRef<Element>\n        // FIXME: types from useInteractions\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n      ) => args as ComponentPropsWithRef<Element>,\n    };\n  }\n\n  return {\n    getTooltipProps,\n    getTriggerProps,\n  };\n}\n"],"names":["open"],"mappings":"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"}

package/dist-es/packages/lab/src/tree/Tree.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltTree {\n  --tree-node-collapse: var(--saltTree-node-collapse, var(--list-svg-tree-node-collapse));\n  --tree-node-expand: var(--saltTree-node-expand, var(--list-svg-tree-node-expand));\n  --tree-node-expanded-transform: var(--saltTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n  --tree-toggle-width: 12px;\n\n  /* TODO: Use appropriate characteristics */\n  --list-background-highlighted: rgba(1, 1, 1, 0.1);\n  --list-item-height: 30px;\n  --list-item-padding: 0 6px;\n  --list-item-header-background: black;\n  --list-item-header-color: white;\n  --list-item-header-fontWeight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: \"\";\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-color: white;\n\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--saltTree-fontSize, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.saltTree-child-nodes {\n  width: 100%;\n}\n\n.saltTree-scrollingContentContainer {\n  box-sizing: inherit;\n  list-style: none;\n  margin: 0;\n  position: relative;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Tree.css.js.map

package/dist-es/packages/lab/src/tree/Tree.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}