@elliemae/ds-card-v2 3.22.0-next.22 → 3.22.0-next.24

package/dist/cjs/CardV3.js

@@ -0,0 +1,189 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CardV3_exports = {};
+__export(CardV3_exports, {
+  Card: () => Card,
+  CardActionArea: () => CardActionArea,
+  CardContent: () => CardContent,
+  CardFooter: () => CardFooter,
+  CardSelectIndicator: () => CardSelectIndicator,
+  DSCardV3DataTestIds: () => DSCardV3DataTestIds,
+  DSCardV3Name: () => DSCardV3Name,
+  DSCardV3Slots: () => DSCardV3Slots,
+  StyledButtonCard: () => StyledButtonCard,
+  StyledCard: () => StyledCard,
+  StyledCardDisabled: () => StyledCardDisabled,
+  StyledCardError: () => StyledCardError,
+  StyledCardSingleIndicator: () => StyledCardSingleIndicator,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(CardV3_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const DSCardV3Name = "DSCardV3";
+const DSCardV3Slots = {
+  ACTION_AREA: "action-area"
+};
+const DSCardV3DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSCardV3Name, DSCardV3Slots);
+const defaultProps = {
+  hasError: false
+};
+const CardActionArea = (0, import_ds_system.styled)("button", {
+  name: DSCardV3Name,
+  slot: DSCardV3Slots.ACTION_AREA
+})`
+  border: none;
+  background-color: transparent;
+  width: 0px;
+  height: 0px;
+  padding: 0;
+  &:focus {
+    outline: none;
+  }
+  text-align: unset;
+`;
+const StyledCard = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
+  outline-offset: -2px;
+  * {
+    color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
+  }
+`;
+const StyledButtonCard = (0, import_ds_system.styled)(StyledCard)`
+  cursor: pointer;
+`;
+const StyledCardError = (0, import_ds_system.styled)(StyledCard)`
+  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
+`;
+const StyledCardSingleIndicator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  width: 4px;
+  align-self: normal;
+  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.brand["700"] : theme.colors.brand["300"]};
+  transition: background-color 0.1s ease-in-out;
+`;
+const StyledCardDisabled = (0, import_ds_system.styled)(StyledCard)`
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 0.5;
+  ${StyledCardSingleIndicator} {
+    background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.neutral["800"] : theme.colors.neutral["080"]};
+  }
+
+  ${CardActionArea} {
+    pointer-events: none;
+  }
+`;
+const CardContent = (0, import_ds_system.styled)(import_ds_grid.Grid)``;
+const CardFooter = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral["200"]};
+`;
+const CardSelectIndicator = (props) => {
+  const { isSelected, isMultiSelect } = props;
+  if (isMultiSelect) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardSingleIndicator, { isSelected });
+};
+const StyledFocusRing = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  width: 100%;
+  height: 100%;
+  outline-offset: -1px;
+  outline: ${({ showFocusRing, hasError, theme }) => {
+  if (showFocusRing) {
+    return `2px solid ${theme.colors.brand[700]}`;
+  }
+  if (hasError) {
+    return `2px solid ${theme.colors.danger[900]}`;
+  }
+  return "none";
+}};
+`;
+const FocusRing = (props) => {
+  const { target, children, hasError } = props;
+  const [showFocusRing, setShowFocusingRing] = import_react.default.useState(false);
+  const handleOnFocus = import_react.default.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(true);
+      }
+    },
+    [target]
+  );
+  const handleOnBlur = import_react.default.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(false);
+      }
+    },
+    [target]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledFocusRing,
+    {
+      hasError,
+      onFocusCapture: handleOnFocus,
+      onBlurCapture: handleOnBlur,
+      showFocusRing,
+      children
+    }
+  );
+};
+const Card = (props) => {
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultProps);
+  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;
+  const StyledCardContainer = (0, import_react.useMemo)(() => {
+    if (onClick && !disabled) {
+      return StyledButtonCard;
+    }
+    if (disabled) {
+      return StyledCardDisabled;
+    }
+    return StyledCard;
+  }, [disabled, onClick]);
+  const globalsAttrs = (0, import_lodash.omit)((0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), ["cols", "rows", "wrap"]);
+  const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardContainer, { border: "solid 1px neutral-100", boxShadow: "xs", isOverlay, ...globalsAttrs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
+    onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CardActionArea,
+      {
+        disabled,
+        "data-testid": DSCardV3DataTestIds.ACTION_AREA,
+        getOwnerProps
+      }
+    ) : null,
+    children
+  ] }) });
+};
+//# sourceMappingURL=CardV3.js.map

package/dist/cjs/CardV3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/CardV3.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } from '@elliemae/ds-utilities';\n\nexport const DSCardV3Name = 'DSCardV3';\nexport const DSCardV3Slots = {\n  ACTION_AREA: 'action-area',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);\n\ndeclare namespace CardT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface OptinalProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n    isOverlay?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  }\n\n  export interface DefaultProps {\n    hasError: boolean;\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      DefaultProps {}\n  export interface InternalProps\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      Partial<DefaultProps> {}\n\n  export interface CardSelectIndicatorProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n  }\n}\n\nexport const defaultProps: CardT.DefaultProps = {\n  hasError: false,\n};\n\nexport const CardActionArea = styled('button', {\n  name: DSCardV3Name,\n  slot: DSCardV3Slots.ACTION_AREA,\n})`\n  border: none;\n  background-color: transparent;\n  width: 0px;\n  height: 0px;\n  padding: 0;\n  &:focus {\n    outline: none;\n  }\n  text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n  isOverlay?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n  background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n  outline-offset: -2px;\n  * {\n    color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n  }\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n  cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n  width: 4px;\n  align-self: normal;\n  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand['700'] : theme.colors.brand['300'])};\n  transition: background-color 0.1s ease-in-out;\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n  cursor: not-allowed;\n  user-select: none;\n  opacity: 0.5;\n  ${StyledCardSingleIndicator} {\n    background-color: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n  }\n\n  ${CardActionArea} {\n    pointer-events: none;\n  }\n`;\n// END style cards variants\nexport const CardContent = styled(Grid)``;\n\nexport const CardFooter = styled(Grid)`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n  const { isSelected, isMultiSelect } = props;\n  if (isMultiSelect) {\n    return (\n      <Grid alignItems=\"center\">\n        <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n      </Grid>\n    );\n  }\n  return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n\nconst StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n  width: 100%;\n  height: 100%;\n  outline-offset: -1px;\n  outline: ${({ showFocusRing, hasError, theme }) => {\n    if (showFocusRing) {\n      return `2px solid ${theme.colors.brand[700]}`;\n    }\n    if (hasError) {\n      return `2px solid ${theme.colors.danger[900]}`;\n    }\n    return 'none';\n  }};\n`;\n\ninterface FocusRingProps {\n  target: string;\n  children: React.ReactNode;\n  hasError?: boolean;\n}\nconst FocusRing = (props: FocusRingProps) => {\n  const { target, children, hasError } = props;\n  const [showFocusRing, setShowFocusingRing] = React.useState(false);\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(true);\n      }\n    },\n    [target],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(false);\n      }\n    },\n    [target],\n  );\n  return (\n    <StyledFocusRing\n      hasError={hasError}\n      onFocusCapture={handleOnFocus}\n      onBlurCapture={handleOnBlur}\n      showFocusRing={showFocusRing}\n    >\n      {children}\n    </StyledFocusRing>\n  );\n};\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;\n  const StyledCardContainer = useMemo(() => {\n    if (onClick && !disabled) {\n      return StyledButtonCard;\n    }\n    if (disabled) {\n      return StyledCardDisabled;\n    }\n    return StyledCard;\n  }, [disabled, onClick]);\n\n  const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ['cols', 'rows', 'wrap']);\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n  return (\n    <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\n      <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n        {onClick ? (\n          <CardActionArea\n            disabled={disabled}\n            data-testid={DSCardV3DataTestIds.ACTION_AREA}\n            getOwnerProps={getOwnerProps}\n          />\n        ) : null}\n        {children}\n      </FocusRing>\n    </StyledCardContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/index.js

@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -39,4 +40,5 @@ var React = __toESM(require("react"));
 var import_DSCardV2 = require("./DSCardV2.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_constants = require("./constants/index.js");
+__reExport(src_exports, require("./CardV3.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,sBAKO;AACP,mCAA+B;AAC/B,uBAAoC;",
+  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\nexport * from './CardV3.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,sBAKO;AACP,mCAA+B;AAC/B,uBAAoC;AACpC,wBAAc,wBAXd;",
   "names": []
 }

package/dist/esm/CardV3.js

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useMemo, useCallback } from "react";
+import { omit } from "lodash";
+import { Grid } from "@elliemae/ds-grid";
+import { styled, slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { PresentationalRadio } from "@elliemae/ds-controlled-form";
+import { useMemoMergePropsWithDefault, useGetGlobalAttributes } from "@elliemae/ds-utilities";
+const DSCardV3Name = "DSCardV3";
+const DSCardV3Slots = {
+  ACTION_AREA: "action-area"
+};
+const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);
+const defaultProps = {
+  hasError: false
+};
+const CardActionArea = styled("button", {
+  name: DSCardV3Name,
+  slot: DSCardV3Slots.ACTION_AREA
+})`
+  border: none;
+  background-color: transparent;
+  width: 0px;
+  height: 0px;
+  padding: 0;
+  &:focus {
+    outline: none;
+  }
+  text-align: unset;
+`;
+const StyledCard = styled(Grid)`
+  background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
+  outline-offset: -2px;
+  * {
+    color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
+  }
+`;
+const StyledButtonCard = styled(StyledCard)`
+  cursor: pointer;
+`;
+const StyledCardError = styled(StyledCard)`
+  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
+`;
+const StyledCardSingleIndicator = styled(Grid)`
+  width: 4px;
+  align-self: normal;
+  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.brand["700"] : theme.colors.brand["300"]};
+  transition: background-color 0.1s ease-in-out;
+`;
+const StyledCardDisabled = styled(StyledCard)`
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 0.5;
+  ${StyledCardSingleIndicator} {
+    background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.neutral["800"] : theme.colors.neutral["080"]};
+  }
+
+  ${CardActionArea} {
+    pointer-events: none;
+  }
+`;
+const CardContent = styled(Grid)``;
+const CardFooter = styled(Grid)`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral["200"]};
+`;
+const CardSelectIndicator = (props) => {
+  const { isSelected, isMultiSelect } = props;
+  if (isMultiSelect) {
+    return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
+  }
+  return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected });
+};
+const StyledFocusRing = styled(Grid)`
+  width: 100%;
+  height: 100%;
+  outline-offset: -1px;
+  outline: ${({ showFocusRing, hasError, theme }) => {
+  if (showFocusRing) {
+    return `2px solid ${theme.colors.brand[700]}`;
+  }
+  if (hasError) {
+    return `2px solid ${theme.colors.danger[900]}`;
+  }
+  return "none";
+}};
+`;
+const FocusRing = (props) => {
+  const { target, children, hasError } = props;
+  const [showFocusRing, setShowFocusingRing] = React2.useState(false);
+  const handleOnFocus = React2.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(true);
+      }
+    },
+    [target]
+  );
+  const handleOnBlur = React2.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(false);
+      }
+    },
+    [target]
+  );
+  return /* @__PURE__ */ jsx(
+    StyledFocusRing,
+    {
+      hasError,
+      onFocusCapture: handleOnFocus,
+      onBlurCapture: handleOnBlur,
+      showFocusRing,
+      children
+    }
+  );
+};
+const Card = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;
+  const StyledCardContainer = useMemo(() => {
+    if (onClick && !disabled) {
+      return StyledButtonCard;
+    }
+    if (disabled) {
+      return StyledCardDisabled;
+    }
+    return StyledCard;
+  }, [disabled, onClick]);
+  const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ["cols", "rows", "wrap"]);
+  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
+  return /* @__PURE__ */ jsx(StyledCardContainer, { border: "solid 1px neutral-100", boxShadow: "xs", isOverlay, ...globalsAttrs, children: /* @__PURE__ */ jsxs(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
+    onClick ? /* @__PURE__ */ jsx(
+      CardActionArea,
+      {
+        disabled,
+        "data-testid": DSCardV3DataTestIds.ACTION_AREA,
+        getOwnerProps
+      }
+    ) : null,
+    children
+  ] }) });
+};
+export {
+  Card,
+  CardActionArea,
+  CardContent,
+  CardFooter,
+  CardSelectIndicator,
+  DSCardV3DataTestIds,
+  DSCardV3Name,
+  DSCardV3Slots,
+  StyledButtonCard,
+  StyledCard,
+  StyledCardDisabled,
+  StyledCardError,
+  StyledCardSingleIndicator,
+  defaultProps
+};
+//# sourceMappingURL=CardV3.js.map

package/dist/esm/CardV3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/CardV3.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } from '@elliemae/ds-utilities';\n\nexport const DSCardV3Name = 'DSCardV3';\nexport const DSCardV3Slots = {\n  ACTION_AREA: 'action-area',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);\n\ndeclare namespace CardT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface OptinalProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n    isOverlay?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  }\n\n  export interface DefaultProps {\n    hasError: boolean;\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      DefaultProps {}\n  export interface InternalProps\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      Partial<DefaultProps> {}\n\n  export interface CardSelectIndicatorProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n  }\n}\n\nexport const defaultProps: CardT.DefaultProps = {\n  hasError: false,\n};\n\nexport const CardActionArea = styled('button', {\n  name: DSCardV3Name,\n  slot: DSCardV3Slots.ACTION_AREA,\n})`\n  border: none;\n  background-color: transparent;\n  width: 0px;\n  height: 0px;\n  padding: 0;\n  &:focus {\n    outline: none;\n  }\n  text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n  isOverlay?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n  background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n  outline-offset: -2px;\n  * {\n    color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n  }\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n  cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n  width: 4px;\n  align-self: normal;\n  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand['700'] : theme.colors.brand['300'])};\n  transition: background-color 0.1s ease-in-out;\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n  cursor: not-allowed;\n  user-select: none;\n  opacity: 0.5;\n  ${StyledCardSingleIndicator} {\n    background-color: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n  }\n\n  ${CardActionArea} {\n    pointer-events: none;\n  }\n`;\n// END style cards variants\nexport const CardContent = styled(Grid)``;\n\nexport const CardFooter = styled(Grid)`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n  const { isSelected, isMultiSelect } = props;\n  if (isMultiSelect) {\n    return (\n      <Grid alignItems=\"center\">\n        <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n      </Grid>\n    );\n  }\n  return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n\nconst StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n  width: 100%;\n  height: 100%;\n  outline-offset: -1px;\n  outline: ${({ showFocusRing, hasError, theme }) => {\n    if (showFocusRing) {\n      return `2px solid ${theme.colors.brand[700]}`;\n    }\n    if (hasError) {\n      return `2px solid ${theme.colors.danger[900]}`;\n    }\n    return 'none';\n  }};\n`;\n\ninterface FocusRingProps {\n  target: string;\n  children: React.ReactNode;\n  hasError?: boolean;\n}\nconst FocusRing = (props: FocusRingProps) => {\n  const { target, children, hasError } = props;\n  const [showFocusRing, setShowFocusingRing] = React.useState(false);\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(true);\n      }\n    },\n    [target],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(false);\n      }\n    },\n    [target],\n  );\n  return (\n    <StyledFocusRing\n      hasError={hasError}\n      onFocusCapture={handleOnFocus}\n      onBlurCapture={handleOnBlur}\n      showFocusRing={showFocusRing}\n    >\n      {children}\n    </StyledFocusRing>\n  );\n};\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;\n  const StyledCardContainer = useMemo(() => {\n    if (onClick && !disabled) {\n      return StyledButtonCard;\n    }\n    if (disabled) {\n      return StyledCardDisabled;\n    }\n    return StyledCard;\n  }, [disabled, onClick]);\n\n  const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ['cols', 'rows', 'wrap']);\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n  return (\n    <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\n      <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n        {onClick ? (\n          <CardActionArea\n            disabled={disabled}\n            data-testid={DSCardV3DataTestIds.ACTION_AREA}\n            getOwnerProps={getOwnerProps}\n          />\n        ) : null}\n        {children}\n      </FocusRing>\n    </StyledCardContainer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/index.js

@@ -7,6 +7,7 @@ import {
 } from "./DSCardV2.js";
 import {} from "./react-desc-prop-types.js";
 import { CARD_V2_DATA_TESTID } from "./constants/index.js";
+export * from "./CardV3.js";
 export {
   CARD_V2_DATA_TESTID,
   DSCardV22 as CustomCard,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACY,YAAZA;AAAA,EACA;AAAA,EACsB,sBAAtBC;AAAA,OACK;AACP,eAA+B;AAC/B,SAAS,2BAA2B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\nexport * from './CardV3.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACY,YAAZA;AAAA,EACA;AAAA,EACsB,sBAAtBC;AAAA,OACK;AACP,eAA+B;AAC/B,SAAS,2BAA2B;AACpC,cAAc;",
   "names": ["DSCardV2", "DSCardV2WithSchema"]
 }

package/dist/types/CardV3.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type GlobalAttributesT } from '@elliemae/ds-utilities';
+export declare const DSCardV3Name = "DSCardV3";
+export declare const DSCardV3Slots: {
+    ACTION_AREA: string;
+};
+export declare const DSCardV3DataTestIds: Record<string, string>;
+declare namespace CardT {
+    interface RequiredProps {
+        children: React.ReactNode;
+    }
+    interface OptinalProps {
+        isSelected?: boolean;
+        isMultiSelect?: boolean;
+        isOverlay?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    }
+    interface DefaultProps {
+        hasError: boolean;
+    }
+    interface Props extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, DefaultProps {
+    }
+    interface InternalProps extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, Partial<DefaultProps> {
+    }
+    interface CardSelectIndicatorProps {
+        isSelected?: boolean;
+        isMultiSelect?: boolean;
+    }
+}
+export declare const defaultProps: CardT.DefaultProps;
+export declare const CardActionArea: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledButtonCard: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCardError: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCardSingleIndicator: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isSelected?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCardDisabled: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("@elliemae/ds-system").Theme | undefined;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const CardContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const CardFooter: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: React.ComponentType<CardT.InternalProps>;
+export {};

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { DSCardV2, DSCardV2 as CustomCard, DSCardV2WithSchema, DSCardV2WithSchema as DSCardCustomWithSchema, } from './DSCardV2.js';
 export { type DSCardV2T } from './react-desc-prop-types.js';
 export { CARD_V2_DATA_TESTID } from './constants/index.js';
+export * from './CardV3.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card-v2",
-  "version": "3.22.0-next.22",
+  "version": "3.22.0-next.24",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card V2",
   "files": [
@@ -51,19 +51,20 @@
     "jest-axe": "^7.0.1",
     "lodash": "^4.17.21",
     "uid": "~2.0.1",
-    "@elliemae/ds-button": "3.22.0-next.22",
-    "@elliemae/ds-grid": "3.22.0-next.22",
-    "@elliemae/ds-icons": "3.22.0-next.22",
-    "@elliemae/ds-header": "3.22.0-next.22",
-    "@elliemae/ds-separator": "3.22.0-next.22",
-    "@elliemae/ds-system": "3.22.0-next.22",
-    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.22",
-    "@elliemae/ds-utilities": "3.22.0-next.22"
+    "@elliemae/ds-button": "3.22.0-next.24",
+    "@elliemae/ds-controlled-form": "3.22.0-next.24",
+    "@elliemae/ds-header": "3.22.0-next.24",
+    "@elliemae/ds-grid": "3.22.0-next.24",
+    "@elliemae/ds-separator": "3.22.0-next.24",
+    "@elliemae/ds-system": "3.22.0-next.24",
+    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.24",
+    "@elliemae/ds-icons": "3.22.0-next.24",
+    "@elliemae/ds-utilities": "3.22.0-next.24"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.22",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.22"
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.24"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "~5.16.4",