@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist-es/common-hooks/useViewportTracking.js

@@ -0,0 +1,131 @@
+import { useRef, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import 'react/jsx-runtime';
+import { useResizeObserver } from '../responsive/useResizeObserver.js';
+
+const HeightOnly = ["height"];
+const HeightWithScroll = ["height", "scrollHeight"];
+const EMPTY_ARRAY = [];
+const ObservedDimensions = {
+  containerOnly: [HeightWithScroll, EMPTY_ARRAY],
+  withContent: [HeightOnly, HeightOnly]
+};
+const getObservedDimensions = (containerOnly) => containerOnly ? ObservedDimensions.containerOnly : ObservedDimensions.withContent;
+const NULL_REF = { current: null };
+const getItemTop = (element, offsetContainer) => {
+  const { transform = "none" } = getComputedStyle(element);
+  if (transform.startsWith("matrix")) {
+    const pos = transform.lastIndexOf(",");
+    return parseInt(transform.slice(pos + 1));
+  } else {
+    let offsetParent = element.offsetParent;
+    if (offsetParent === offsetContainer || offsetContainer === null) {
+      return element.offsetTop;
+    } else {
+      let top = element.offsetTop;
+      while (offsetParent !== null && offsetParent !== offsetContainer) {
+        top += offsetParent.offsetTop;
+        offsetParent = offsetParent.offsetParent;
+      }
+      return top;
+    }
+  }
+};
+const useViewportTracking = ({
+  containerRef,
+  contentRef = NULL_REF,
+  highlightedIdx = -1,
+  indexPositions,
+  stickyHeaders = false
+}) => {
+  const scrolling = useRef(false);
+  const viewport = useRef({
+    height: 0,
+    contentHeight: 0
+  });
+  const scrollTo = useCallback((scrollPos) => {
+    scrolling.current = true;
+    if (containerRef.current) {
+      containerRef.current.scrollTop = scrollPos;
+    }
+    setTimeout(() => {
+      scrolling.current = false;
+    });
+  }, []);
+  const scrollToStart = useCallback(() => scrollTo(0), [scrollTo]);
+  const scrollToEnd = useCallback(() => {
+    scrollTo(viewport.current.contentHeight - viewport.current.height);
+  }, [scrollTo]);
+  const scrollIntoViewIfNeeded = useCallback(
+    (item) => {
+      const offsetContainer = contentRef.current || containerRef.current;
+      if (item.id) {
+        const el = document.getElementById(item.id);
+        if (el && containerRef.current) {
+          const { height: viewportHeight } = viewport.current;
+          const targetEl = el.ariaExpanded && el.firstChild ? el.firstChild : el;
+          const headerHeight = stickyHeaders ? 36 : 0;
+          const itemTop = getItemTop(targetEl, offsetContainer);
+          const itemHeight = targetEl.offsetHeight;
+          const { scrollTop } = containerRef.current;
+          const viewportStart = scrollTop + headerHeight;
+          const viewportEnd = viewportStart + viewportHeight - headerHeight;
+          if (itemTop + itemHeight > viewportEnd || itemTop < viewportStart) {
+            const newScrollTop = itemTop + itemHeight > viewportEnd ? scrollTop + (itemTop + itemHeight) - viewportEnd : itemTop - headerHeight;
+            scrollTo(newScrollTop);
+          }
+        }
+      }
+    },
+    [containerRef, contentRef, scrollTo, stickyHeaders]
+  );
+  useIsomorphicLayoutEffect(() => {
+    const { height, contentHeight } = viewport.current;
+    const item = indexPositions[highlightedIdx];
+    if (contentHeight > height && item) {
+      const [firstItem] = indexPositions;
+      const [lastItem] = indexPositions.slice(-1);
+      if (item === firstItem) {
+        scrollToStart();
+      } else if (item === lastItem) {
+        scrollToEnd();
+      } else {
+        scrollIntoViewIfNeeded(indexPositions[highlightedIdx]);
+      }
+    }
+  }, [
+    highlightedIdx,
+    indexPositions,
+    scrollIntoViewIfNeeded,
+    scrollToEnd,
+    scrollToStart
+  ]);
+  const onContainerResize = useCallback(
+    ({ height, scrollHeight }) => {
+      if (typeof height === "number") {
+        viewport.current.height = height;
+      }
+      if (typeof scrollHeight === "number") {
+        viewport.current.contentHeight = scrollHeight;
+      }
+    },
+    []
+  );
+  const onContentResize = useCallback(({ height }) => {
+    if (typeof height === "number") {
+      viewport.current.contentHeight = height;
+    }
+  }, []);
+  const [containerDimensions, contentDimensions] = getObservedDimensions(
+    contentRef === NULL_REF
+  );
+  useResizeObserver(containerRef, containerDimensions, onContainerResize, true);
+  useResizeObserver(contentRef, contentDimensions, onContentResize, true);
+  return {
+    isScrolling: scrolling,
+    scrollIntoView: scrollIntoViewIfNeeded
+  };
+};
+
+export { useViewportTracking };
+//# sourceMappingURL=useViewportTracking.js.map

package/dist-es/common-hooks/useViewportTracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewportTracking.js","sources":["../src/common-hooks/useViewportTracking.ts"],"sourcesContent":["import { MutableRefObject, RefObject, useCallback, useRef } from \"react\";\nimport { CollectionItem } from \"./collectionTypes\";\nimport { ResizeHandler, useResizeObserver } from \"../responsive\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nconst HeightOnly = [\"height\"];\nconst HeightWithScroll = [\"height\", \"scrollHeight\"];\nconst EMPTY_ARRAY: any[] = [];\n\nconst ObservedDimensions = {\n  containerOnly: [HeightWithScroll, EMPTY_ARRAY],\n  withContent: [HeightOnly, HeightOnly],\n};\nconst getObservedDimensions = (containerOnly: boolean) =>\n  containerOnly\n    ? ObservedDimensions.containerOnly\n    : ObservedDimensions.withContent;\n\nconst NULL_REF = { current: null };\n\nconst getItemTop = (\n  element: HTMLElement,\n  offsetContainer: HTMLElement | null\n) => {\n  const { transform = \"none\" } = getComputedStyle(element);\n  if (transform.startsWith(\"matrix\")) {\n    const pos = transform.lastIndexOf(\",\");\n    return parseInt(transform.slice(pos + 1));\n  } else {\n    let offsetParent = element.offsetParent as HTMLElement;\n    if (offsetParent === offsetContainer || offsetContainer === null) {\n      return element.offsetTop;\n    } else {\n      let top = element.offsetTop;\n      while (offsetParent !== null && offsetParent !== offsetContainer) {\n        top += offsetParent.offsetTop;\n        offsetParent = offsetParent.offsetParent as HTMLElement;\n      }\n      return top;\n    }\n  }\n};\n\nexport interface ViewportTrackingProps<Item> {\n  containerRef: RefObject<HTMLElement>;\n  contentRef?: RefObject<HTMLElement>;\n  highlightedIdx?: number;\n  indexPositions: CollectionItem<Item>[];\n  stickyHeaders?: boolean;\n}\n\nexport interface ViewportTrackingResult<Item> {\n  isScrolling: MutableRefObject<boolean>;\n  scrollIntoView: (item: CollectionItem<Item>) => void;\n}\n\nexport const useViewportTracking = <Item>({\n  containerRef,\n  contentRef = NULL_REF,\n  highlightedIdx = -1,\n  indexPositions,\n  stickyHeaders = false,\n}: ViewportTrackingProps<Item>): ViewportTrackingResult<Item> => {\n  const scrolling = useRef<boolean>(false);\n  const viewport = useRef({\n    height: 0,\n    contentHeight: 0,\n  });\n\n  const scrollTo = useCallback((scrollPos: number) => {\n    scrolling.current = true;\n    if (containerRef.current) {\n      containerRef.current.scrollTop = scrollPos;\n    }\n    setTimeout(() => {\n      scrolling.current = false;\n    });\n  }, []);\n\n  const scrollToStart = useCallback(() => scrollTo(0), [scrollTo]);\n\n  const scrollToEnd = useCallback(() => {\n    scrollTo(viewport.current.contentHeight - viewport.current.height);\n  }, [scrollTo]);\n\n  const scrollIntoViewIfNeeded = useCallback(\n    (item: CollectionItem<Item>) => {\n      const offsetContainer = contentRef.current || containerRef.current;\n      if (item.id) {\n        const el = document.getElementById(item.id);\n        if (el && containerRef.current) {\n          const { height: viewportHeight } = viewport.current;\n          const targetEl =\n            el.ariaExpanded && el.firstChild\n              ? (el.firstChild as HTMLElement)\n              : el;\n          const headerHeight = stickyHeaders ? 36 : 0;\n          const itemTop = getItemTop(targetEl, offsetContainer);\n          const itemHeight = targetEl.offsetHeight;\n          const { scrollTop } = containerRef.current;\n          const viewportStart = scrollTop + headerHeight;\n          const viewportEnd = viewportStart + viewportHeight - headerHeight;\n\n          if (itemTop + itemHeight > viewportEnd || itemTop < viewportStart) {\n            const newScrollTop =\n              itemTop + itemHeight > viewportEnd\n                ? scrollTop + (itemTop + itemHeight) - viewportEnd\n                : itemTop - headerHeight;\n\n            scrollTo(newScrollTop);\n          }\n        }\n      }\n    },\n    [containerRef, contentRef, scrollTo, stickyHeaders]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const { height, contentHeight } = viewport.current;\n    const item = indexPositions[highlightedIdx];\n    if (contentHeight > height && item) {\n      const [firstItem] = indexPositions;\n      const [lastItem] = indexPositions.slice(-1);\n      if (item === firstItem) {\n        scrollToStart();\n      } else if (item === lastItem) {\n        scrollToEnd();\n      } else {\n        scrollIntoViewIfNeeded(indexPositions[highlightedIdx]);\n      }\n    }\n  }, [\n    highlightedIdx,\n    indexPositions,\n    scrollIntoViewIfNeeded,\n    scrollToEnd,\n    scrollToStart,\n  ]);\n\n  const onContainerResize: ResizeHandler = useCallback(\n    ({ height, scrollHeight }) => {\n      if (typeof height === \"number\") {\n        viewport.current.height = height;\n      }\n      if (typeof scrollHeight === \"number\") {\n        viewport.current.contentHeight = scrollHeight;\n      }\n    },\n    []\n  );\n\n  const onContentResize: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      viewport.current.contentHeight = height;\n    }\n  }, []);\n\n  // If we only have a container, then we will observe its height and scrollHeight,\n  // contentRef will be null, so second call to observer will observe nothing.\n  // If we have both container and content, then we observe the height of each.\n  const [containerDimensions, contentDimensions] = getObservedDimensions(\n    contentRef === NULL_REF\n  );\n  useResizeObserver(containerRef, containerDimensions, onContainerResize, true);\n  useResizeObserver(contentRef, contentDimensions, onContentResize, true);\n\n  return {\n    isScrolling: scrolling,\n    scrollIntoView: scrollIntoViewIfNeeded,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/common-hooks/utils/filter-utils.js

@@ -0,0 +1,10 @@
+import { escapeRegExp } from '../../utils/escapeRegExp.js';
+import 'react';
+import '@salt-ds/core';
+
+const leftTrim = (value) => value ? value.replace(/^\s+/g, "") : value;
+const getDefaultFilterRegex = (value) => new RegExp(`(${escapeRegExp(leftTrim(value))})`, "gi");
+const getDefaultFilter = (inputValue = "", getFilterRegex = getDefaultFilterRegex) => (itemValue = "") => Boolean(itemValue.length) && Boolean(inputValue.length) && itemValue.match(getFilterRegex(inputValue)) !== null;
+
+export { getDefaultFilter, getDefaultFilterRegex };
+//# sourceMappingURL=filter-utils.js.map

package/dist-es/common-hooks/utils/filter-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-utils.js","sources":["../src/common-hooks/utils/filter-utils.ts"],"sourcesContent":["import { escapeRegExp } from \"../../utils\";\n\nexport type GetFilterRegex = (inputValue: string) => RegExp;\n\nexport type FilterPredicate = (item: string) => boolean;\n\nconst leftTrim = (value: string) =>\n  value ? value.replace(/^\\s+/g, \"\") : value;\n\nexport const getDefaultFilterRegex: GetFilterRegex = (value) =>\n  new RegExp(`(${escapeRegExp(leftTrim(value))})`, \"gi\");\n\nexport const getDefaultFilter =\n  (inputValue = \"\", getFilterRegex: GetFilterRegex = getDefaultFilterRegex) =>\n  (itemValue = \"\"): boolean =>\n    Boolean(itemValue.length) &&\n    Boolean(inputValue.length) &&\n    itemValue.match(getFilterRegex(inputValue)) !== null;\n"],"names":[],"mappings":";;;;AAMA,MAAM,QAAA,GAAW,CAAC,KAChB,KAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAI,GAAA,KAAA,CAAA;AAE1B,MAAA,qBAAA,GAAwC,CAAC,KAAA,KACpD,IAAI,MAAA,CAAO,CAAI,CAAA,EAAA,YAAA,CAAa,QAAS,CAAA,KAAK,CAAC,CAAA,CAAA,CAAA,CAAA,EAAM,IAAI,EAAA;AAE1C,MAAA,gBAAA,GACX,CAAC,UAAa,GAAA,EAAA,EAAI,iBAAiC,qBACnD,KAAA,CAAC,SAAY,GAAA,EAAA,KACX,OAAQ,CAAA,SAAA,CAAU,MAAM,CACxB,IAAA,OAAA,CAAQ,WAAW,MAAM,CAAA,IACzB,UAAU,KAAM,CAAA,cAAA,CAAe,UAAU,CAAC,CAAM,KAAA;;;;"}

package/dist-es/contact-details/ContactDetails.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-content-primary-foreground);\n  --contactDetails-label-color: var(--salt-content-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ContactDetails.css.js.map

package/dist-es/contact-details/ContactDetails.css.js.map

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

package/dist-es/contact-details/ContactDetails.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import './internal/FavoriteToggleWithTooltip.js';
+import { ContactDetailsContext } from './internal/ContactDetailsContext.js';
+import { useComponentSize } from './internal/useComponentSize.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ContactDetails.css.js';
+
+const withBaseName = makePrefixer("saltContactDetails");
+function getClassName(variant, isStacked) {
+  return withBaseName(`${variant}${isStacked ? "-stacked" : ""}`);
+}
+const ContactDetails = forwardRef(
+  function ContactDetails2(props, externalRef) {
+    const {
+      children,
+      variant = "default",
+      className,
+      stackAtBreakpoint = 300,
+      embedded,
+      ...restProps
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-contact-details",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [hasAvatar, setHasAvatar] = useState(false);
+    const [primary, setPrimary] = useState();
+    const [primaryId, setPrimaryId] = useState();
+    const [secondary, setSecondary] = useState();
+    const [secondaryId, setSecondaryId] = useState();
+    const [tertiary, setTertiary] = useState();
+    const [tertiaryId, setTertiaryId] = useState();
+    const [containerRef, componentSize] = useComponentSize(stackAtBreakpoint);
+    const isStacked = componentSize && componentSize.width < stackAtBreakpoint;
+    variant === "compact" && isStacked && console.log("componentSize", componentSize.width, containerRef.current);
+    const ref = useForkRef(externalRef, containerRef);
+    const contextValue = {
+      variant,
+      hasAvatar,
+      setHasAvatar,
+      isStacked,
+      primary,
+      setPrimary,
+      primaryId,
+      setPrimaryId,
+      secondary,
+      setSecondary,
+      secondaryId,
+      setSecondaryId,
+      tertiary,
+      setTertiary,
+      tertiaryId,
+      setTertiaryId
+    };
+    const showNoAvatar = !hasAvatar && !embedded && variant !== "mini";
+    return /* @__PURE__ */ jsx(ContactDetailsContext.Provider, {
+      value: contextValue,
+      children: /* @__PURE__ */ jsxs("div", {
+        ...restProps,
+        ref,
+        className: clsx(
+          withBaseName(),
+          getClassName(variant, isStacked),
+          {
+            [withBaseName("embedded")]: embedded,
+            [withBaseName("noAvatar")]: showNoAvatar
+          },
+          className
+        ),
+        role: "article",
+        "aria-roledescription": "Contact Card",
+        children: [
+          children,
+          showNoAvatar ? /* @__PURE__ */ jsx("div", {
+            className: withBaseName("noAvatar-indicator")
+          }) : null
+        ]
+      })
+    });
+  }
+);
+
+export { ContactDetails };
+//# sourceMappingURL=ContactDetails.js.map

package/dist-es/contact-details/ContactDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactDetails.js","sources":["../src/contact-details/ContactDetails.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { ContactDetailsContext, useComponentSize } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport contactDetailsCss from \"./ContactDetails.css\";\n\nconst withBaseName = makePrefixer(\"saltContactDetails\");\n\nexport type ContactDetailsVariant = \"default\" | \"compact\" | \"mini\";\n\nexport interface ContactDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: ContactDetailsVariant;\n  stackAtBreakpoint?: number;\n  embedded?: boolean;\n}\n\nfunction getClassName(variant: ContactDetailsVariant, isStacked?: boolean) {\n  return withBaseName(`${variant}${isStacked ? \"-stacked\" : \"\"}`);\n}\n\nexport const ContactDetails = forwardRef<HTMLDivElement, ContactDetailsProps>(\n  function ContactDetails(props, externalRef) {\n    const {\n      children,\n      variant = \"default\",\n      className,\n      stackAtBreakpoint = 300,\n      embedded,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-contact-details\",\n      css: contactDetailsCss,\n      window: targetWindow,\n    });\n\n    const [hasAvatar, setHasAvatar] = useState<boolean>(false);\n    const [primary, setPrimary] = useState<string>();\n    const [primaryId, setPrimaryId] = useState<string>();\n\n    const [secondary, setSecondary] = useState<string>();\n    const [secondaryId, setSecondaryId] = useState<string>();\n\n    const [tertiary, setTertiary] = useState<string>();\n    const [tertiaryId, setTertiaryId] = useState<string>();\n\n    const [containerRef, componentSize] =\n      useComponentSize<HTMLDivElement>(stackAtBreakpoint);\n\n    const isStacked = componentSize && componentSize.width < stackAtBreakpoint;\n\n    variant === \"compact\" &&\n      isStacked &&\n      console.log(\"componentSize\", componentSize.width, containerRef.current);\n\n    const ref = useForkRef(externalRef, containerRef);\n\n    const contextValue = {\n      variant,\n      hasAvatar,\n      setHasAvatar,\n      isStacked,\n      primary,\n      setPrimary,\n      primaryId,\n      setPrimaryId,\n      secondary,\n      setSecondary,\n      secondaryId,\n      setSecondaryId,\n      tertiary,\n      setTertiary,\n      tertiaryId,\n      setTertiaryId,\n    };\n\n    const showNoAvatar = !hasAvatar && !embedded && variant !== \"mini\";\n\n    return (\n      <ContactDetailsContext.Provider value={contextValue}>\n        <div\n          {...restProps}\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            getClassName(variant, isStacked),\n            {\n              [withBaseName(\"embedded\")]: embedded,\n              [withBaseName(\"noAvatar\")]: showNoAvatar,\n            },\n            className\n          )}\n          role=\"article\"\n          aria-roledescription=\"Contact Card\"\n        >\n          {children}\n          {showNoAvatar ? (\n            <div className={withBaseName(\"noAvatar-indicator\")} />\n          ) : null}\n        </div>\n      </ContactDetailsContext.Provider>\n    );\n  }\n);\n"],"names":["ContactDetails","contactDetailsCss"],"mappings":"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"}

package/dist-es/contact-details/ContactMetadataItem.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { forwardRef } from 'react';
+import { MailLinkComponent } from './MailLinkComponent.js';
+
+const withBaseName = makePrefixer("saltContactMetadataItem");
+const ContactMetadataItem = forwardRef(function ContactMetadataItem2(props, ref) {
+  const { label, value, icon: Icon, ValueComponent, ...restProps } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    ...restProps,
+    ref,
+    className: withBaseName(),
+    children: [
+      !Icon ? /* @__PURE__ */ jsx(Text, {
+        maxRows: 1,
+        className: withBaseName("label"),
+        variant: "secondary",
+        children: label
+      }) : null,
+      Icon ? /* @__PURE__ */ jsx(Icon, {
+        className: withBaseName("icon")
+      }) : null,
+      ValueComponent ? /* @__PURE__ */ jsx(ValueComponent, {
+        value
+      }) : /* @__PURE__ */ jsx(MailLinkComponent, {
+        value
+      })
+    ]
+  });
+});
+
+export { ContactMetadataItem };
+//# sourceMappingURL=ContactMetadataItem.js.map

package/dist-es/contact-details/ContactMetadataItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactMetadataItem.js","sources":["../src/contact-details/ContactMetadataItem.tsx"],"sourcesContent":["import { makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef, HTMLAttributes } from \"react\";\nimport { MailLinkComponent } from \"./MailLinkComponent\";\nimport { ValueComponentProps } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltContactMetadataItem\");\n\nexport interface ContactMetadataItemProps\n  extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n  value: string;\n  icon?: ComponentType<IconProps>;\n  ValueComponent?: ComponentType<ValueComponentProps>;\n}\n\nexport const ContactMetadataItem = forwardRef<\n  HTMLDivElement,\n  ContactMetadataItemProps\n>(function ContactMetadataItem(props, ref) {\n  const { label, value, icon: Icon, ValueComponent, ...restProps } = props;\n  return (\n    <div {...restProps} ref={ref} className={withBaseName()}>\n      {!Icon ? (\n        <Text maxRows={1} className={withBaseName(\"label\")} variant=\"secondary\">\n          {label}\n        </Text>\n      ) : null}\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n\n      {ValueComponent ? (\n        <ValueComponent value={value} />\n      ) : (\n        <MailLinkComponent value={value} />\n      )}\n    </div>\n  );\n});\n"],"names":["ContactMetadataItem"],"mappings":";;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,MAAM,IAAM,EAAA,cAAA,EAAA,GAAmB,WAAc,GAAA,KAAA,CAAA;AACnE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAK,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAAU,WAAW,YAAa,EAAA;AAAA,IACnD,QAAA,EAAA;AAAA,MAAA,CAAC,uBACC,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,OAAS,EAAA,CAAA;AAAA,QAAG,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAG,OAAQ,EAAA,WAAA;AAAA,QACzD,QAAA,EAAA,KAAA;AAAA,OACH,CACE,GAAA,IAAA;AAAA,MACH,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MAEnD,iCACE,GAAA,CAAA,cAAA,EAAA;AAAA,QAAe,KAAA;AAAA,OAAc,oBAE7B,GAAA,CAAA,iBAAA,EAAA;AAAA,QAAkB,KAAA;AAAA,OAAc,CAAA;AAAA,KAAA;AAAA,GAErC,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/contact-details/MailLinkComponent.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { Link, Text } from '@salt-ds/core';
+import { isEmail } from '../utils/isEmail.js';
+import 'react';
+
+const MailLinkComponent = (props) => {
+  const { value, ...restProps } = props;
+  return isEmail(value) ? /* @__PURE__ */ jsx(Link, {
+    href: `mailto:${value}`,
+    tabIndex: 0,
+    maxRows: 1,
+    ...restProps,
+    children: value
+  }) : /* @__PURE__ */ jsx(Text, {
+    maxRows: 1,
+    children: value
+  });
+};
+
+export { MailLinkComponent };
+//# sourceMappingURL=MailLinkComponent.js.map

package/dist-es/contact-details/MailLinkComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MailLinkComponent.js","sources":["../src/contact-details/MailLinkComponent.tsx"],"sourcesContent":["import { Link, Text } from \"@salt-ds/core\";\n\nimport { isEmail } from \"../utils\";\nimport { ValueComponentProps } from \"./types\";\n\nexport const MailLinkComponent = (props: ValueComponentProps) => {\n  const { value, ...restProps } = props;\n\n  return isEmail(value) ? (\n    <Link href={`mailto:${value}`} tabIndex={0} maxRows={1} {...restProps}>\n      {value}\n    </Link>\n  ) : (\n    <Text maxRows={1}>{value}</Text>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,iBAAA,GAAoB,CAAC,KAA+B,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAU,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAA,mBACjB,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,MAAM,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IAAS,QAAU,EAAA,CAAA;AAAA,IAAG,OAAS,EAAA,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IACzD,QAAA,EAAA,KAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAS,EAAA,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AAE7B;;;;"}

package/dist-es/content-status/ContentStatus.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title.saltText {\n  font-weight: var(--salt-text-display1-fontWeight);\n  /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ContentStatus.css.js.map

package/dist-es/content-status/ContentStatus.css.js.map

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

package/dist-es/content-status/ContentStatus.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useAriaAnnouncer, Text, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { StatusIndicator } from './internal/StatusIndicator.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ContentStatus.css.js';
+
+const withBaseName = makePrefixer("saltContentStatus");
+const ContentStatus = forwardRef(
+  function ContentStatus2({
+    CircularProgressProps,
+    SpinnerProps,
+    actionLabel,
+    buttonRef,
+    className,
+    children,
+    disableAnnouncer,
+    message,
+    onActionClick,
+    status = "info",
+    title,
+    value,
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-content-status",
+      css: css_248z,
+      window: targetWindow
+    });
+    const id = useId();
+    const hasDefaultActionContent = actionLabel && onActionClick;
+    const hasActions = children || hasDefaultActionContent;
+    const hasContent = title || message || hasActions;
+    const { announce } = useAriaAnnouncer();
+    useEffect(() => {
+      if (disableAnnouncer)
+        return;
+      const toBeAnnounced = [];
+      if (title) {
+        toBeAnnounced.push(title);
+      }
+      if (message) {
+        toBeAnnounced.push(message);
+      }
+      if (status !== "loading") {
+        toBeAnnounced.push(status);
+      }
+      if (toBeAnnounced.length > 0) {
+        announce(toBeAnnounced.join(" "));
+      }
+    }, [announce, disableAnnouncer, message, status, title]);
+    return /* @__PURE__ */ jsxs("div", {
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(StatusIndicator, {
+          CircularProgressProps,
+          SpinnerProps,
+          disableAnnouncer,
+          id,
+          message,
+          status,
+          title,
+          value,
+          ...rest
+        }),
+        hasContent && /* @__PURE__ */ jsxs("div", {
+          "aria-labelledby": id,
+          className: clsx(withBaseName("content")),
+          id,
+          role: "region",
+          children: [
+            title && /* @__PURE__ */ jsx(Text, {
+              className: clsx(withBaseName("title")),
+              children: title
+            }),
+            message && /* @__PURE__ */ jsx(Text, {
+              className: clsx(withBaseName("message")),
+              children: message
+            }),
+            hasActions && /* @__PURE__ */ jsx("div", {
+              className: clsx(withBaseName("actions")),
+              children: children || /* @__PURE__ */ jsx(Button, {
+                onClick: onActionClick,
+                ref: buttonRef,
+                children: actionLabel
+              })
+            })
+          ]
+        })
+      ]
+    });
+  }
+);
+
+export { ContentStatus };
+//# sourceMappingURL=ContentStatus.js.map

package/dist-es/content-status/ContentStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentStatus.js","sources":["../src/content-status/ContentStatus.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  Text,\n  useAriaAnnouncer,\n  useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEvent, Ref, useEffect } from \"react\";\n\nimport {\n  StatusIndicator,\n  StatusIndicatorProps,\n} from \"./internal/StatusIndicator\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport contentStatusCss from \"./ContentStatus.css\";\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport interface ContentStatusProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StatusIndicatorProps {\n  actionLabel?: string;\n  buttonRef?: Ref<any>;\n  onActionClick?: (evt: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const ContentStatus = forwardRef<HTMLDivElement, ContentStatusProps>(\n  function ContentStatus(\n    {\n      CircularProgressProps,\n      SpinnerProps,\n      actionLabel,\n      buttonRef,\n      className,\n      children,\n      disableAnnouncer,\n      message,\n      onActionClick,\n      status = \"info\",\n      title,\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-content-status\",\n      css: contentStatusCss,\n      window: targetWindow,\n    });\n\n    const id = useId();\n\n    const hasDefaultActionContent = actionLabel && onActionClick;\n    const hasActions = children || hasDefaultActionContent;\n    const hasContent = title || message || hasActions;\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      const toBeAnnounced = [];\n      if (title) {\n        toBeAnnounced.push(title);\n      }\n      if (message) {\n        toBeAnnounced.push(message);\n      }\n      // Loading is announced by the spinner\n      if (status !== \"loading\") {\n        toBeAnnounced.push(status);\n      }\n      if (toBeAnnounced.length > 0) {\n        announce(toBeAnnounced.join(\" \"));\n      }\n    }, [announce, disableAnnouncer, message, status, title]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <StatusIndicator\n          CircularProgressProps={CircularProgressProps}\n          SpinnerProps={SpinnerProps}\n          disableAnnouncer={disableAnnouncer}\n          id={id}\n          message={message}\n          status={status}\n          title={title}\n          value={value}\n          {...rest}\n        />\n        {hasContent && (\n          <div\n            // `aria-labelledby` to itself so that children of this div will show up in screen reader, and we don't need to join to aria-label\n            aria-labelledby={id}\n            className={clsx(withBaseName(\"content\"))}\n            id={id}\n            role=\"region\"\n          >\n            {title && (\n              <Text className={clsx(withBaseName(\"title\"))}>{title}</Text>\n            )}\n            {message && (\n              <Text className={clsx(withBaseName(\"message\"))}>{message}</Text>\n            )}\n            {hasActions && (\n              <div className={clsx(withBaseName(\"actions\"))}>\n                {children || (\n                  <Button onClick={onActionClick} ref={buttonRef}>\n                    {actionLabel}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["ContentStatus","contentStatusCss"],"mappings":"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"}

package/dist-es/content-status/internal/StatusIndicator.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, CircularProgress, Spinner, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
+import { clsx } from 'clsx';
+
+const withBaseName = makePrefixer("saltContentStatus");
+function StatusIndicator({
+  status = "info",
+  disableAnnouncer,
+  value,
+  title,
+  message,
+  CircularProgressProps: {
+    className: circularProgressClassName,
+    ...restCircularProgressProps
+  } = {},
+  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},
+  id
+}) {
+  if (status === "loading") {
+    if (value !== void 0) {
+      return /* @__PURE__ */ jsx(CircularProgress, {
+        "aria-label": title || message,
+        className: clsx(
+          withBaseName("determinateLoading"),
+          circularProgressClassName
+        ),
+        value,
+        ...restCircularProgressProps
+      });
+    }
+    return /* @__PURE__ */ jsx(Spinner, {
+      className: clsx(withBaseName("indeterminateLoading"), spinnerClassName),
+      completionAnnouncement: null,
+      "data-testid": `spinner-${id}`,
+      disableAnnouncer,
+      ...restSpinnerProps
+    });
+  }
+  return /* @__PURE__ */ jsx(StatusIndicator$1, {
+    status,
+    "data-jpmui-test": `icon-${status}-${id}`,
+    size: 2
+  });
+}
+
+export { StatusIndicator };
+//# sourceMappingURL=StatusIndicator.js.map

package/dist-es/content-status/internal/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"@salt-ds/core\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/date-input/DateInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDateInput-background, var(--input-background));\n  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDateInput-height, var(--salt-size-base));\n  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltDateInput-minWidth, 4em);\n  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltDateInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltDateInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltDateInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltDateInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error,\n.saltDateInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning,\n.saltDateInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success,\n.saltDateInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltDateInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: left;\n  width: min-content;\n}\n\n/* Reset in the  class */\n.saltDateInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltDateInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltDateInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-focused.saltDateInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltDateInput-focused.saltDateInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltDateInput.saltDateInput-disabled,\n.saltDateInput.saltDateInput-disabled:hover,\n.saltDateInput.saltDateInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltDateInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltDateInput-readOnly .saltDateInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltDateInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DateInput.css.js.map

package/dist-es/date-input/DateInput.css.js.map

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