@elliemae/ds-system 3.52.1 → 3.53.0-alpha.2

package/dist/cjs/styled/generated-attributes/generateAttributes.js

@@ -42,13 +42,24 @@ const generateClassName = (props, meta) => {
 };
 const generateDataTestId = (props, meta) => {
   if (meta.displayName === null) return {};
+  if (meta.options.preserveLegacyDataTestId) {
+    return props["data-testid"] ? { "data-testid": props["data-testid"] } : {};
+  }
   return {
     "data-testid": props["data-testid"] ?? (0, import_helpers.displayNameToKebabCase)(meta.displayName)
   };
 };
 const generateDataDimsumSlot = (props, meta) => {
   if (meta.displayName === null) return {};
+  if (!props.didDefinedGetOwnerProps) {
+    return {};
+  }
+  const finalProps = {};
+  if (props["data-dimsum-slot"]) {
+    finalProps["data-dimsum-parent-slot"] = props["data-dimsum-slot"];
+  }
   return {
+    ...finalProps,
     "data-dimsum-slot": (0, import_helpers.displayNameToPropCase)(meta.displayName)
   };
 };

package/dist/cjs/styled/generated-attributes/generateAttributes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styled/generated-attributes/generateAttributes.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase, displayNameToPropCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateDataDimsumSlot: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-dimsum-slot': displayNameToPropCase(meta.displayName),\n  };\n};\n\nexport const getPartProps = (\n  props: { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface,\n): Record<string, unknown> => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  // TODO: @carusox deprecate data-testid usage in favor of data-dimsum-slot\n  const elementProps = ownerPropsValue[props['data-dimsum-slot']] ?? ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  return resultingObject;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateDataDimsumSlot, meta)];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAA8D;AAG9D,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,SAAK,uCAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,yBAA4C,CAAC,OAAO,SAAS;AACjE,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,wBAAoB,sCAAsB,KAAK,WAAW;AAAA,EAC5D;AACF;AAEO,MAAM,eAAe,CAC1B,UAC4B;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB,OAAW,QAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAGhE,QAAM,eAAe,gBAAgB,MAAM,kBAAkB,CAAC,KAAK,gBAAgB,MAAM,aAAa,CAAC;AAGvG,MAAI,iBAAiB,UAAa,iBAAiB,KAAM,QAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO,CAAC,KAAK,mBAAmB,IAAI,GAAG,KAAK,oBAAoB,IAAI,GAAG,KAAK,wBAAwB,IAAI,CAAC;AAC3G;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase, displayNameToPropCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  if (meta.options.preserveLegacyDataTestId) {\n    return props['data-testid'] ? { 'data-testid': props['data-testid'] } : {};\n  }\n\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateDataDimsumSlot: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n\n  if (!props.didDefinedGetOwnerProps) {\n    // temp disabling the warning because we don't want final app to be affected, next branch has correct logic here already, hotfix can just remove the warning\n    // if (process.env.NODE_ENV !== 'production') {\n    //   console.warn(\n    //     `The component ${meta.displayName} does not define the 'getOwnerProps' function. The 'data-dimsum-slot' attribute will not be generated.\n    //    This is required for the slot system to work correctly. Please ensure that the component is properly configured.`,\n    //   );\n    // }\n    return {};\n  }\n  const finalProps: Record<string, unknown> = {};\n  if (props['data-dimsum-slot']) {\n    finalProps['data-dimsum-parent-slot'] = props['data-dimsum-slot'];\n  }\n  return {\n    ...finalProps,\n    'data-dimsum-slot': displayNameToPropCase(meta.displayName),\n  };\n};\n\nexport const getPartProps = (\n  props: { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface,\n): Record<string, unknown> => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  // TODO: @carusox deprecate data-testid usage in favor of data-dimsum-slot\n  const elementProps = ownerPropsValue[props['data-dimsum-slot']] ?? ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  return resultingObject;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateDataDimsumSlot, meta)];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAA8D;AAG9D,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,MAAI,KAAK,QAAQ,0BAA0B;AACzC,WAAO,MAAM,aAAa,IAAI,EAAE,eAAe,MAAM,aAAa,EAAE,IAAI,CAAC;AAAA,EAC3E;AAEA,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,SAAK,uCAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,yBAA4C,CAAC,OAAO,SAAS;AACjE,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AAEvC,MAAI,CAAC,MAAM,yBAAyB;AAQlC,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAsC,CAAC;AAC7C,MAAI,MAAM,kBAAkB,GAAG;AAC7B,eAAW,yBAAyB,IAAI,MAAM,kBAAkB;AAAA,EAClE;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,wBAAoB,sCAAsB,KAAK,WAAW;AAAA,EAC5D;AACF;AAEO,MAAM,eAAe,CAC1B,UAC4B;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB,OAAW,QAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAGhE,QAAM,eAAe,gBAAgB,MAAM,kBAAkB,CAAC,KAAK,gBAAgB,MAAM,aAAa,CAAC;AAGvG,MAAI,iBAAiB,UAAa,iBAAiB,KAAM,QAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO,CAAC,KAAK,mBAAmB,IAAI,GAAG,KAAK,oBAAoB,IAAI,GAAG,KAAK,wBAAwB,IAAI,CAAC;AAC3G;",
   "names": []
 }

package/dist/cjs/styled/helpers.js

@@ -45,15 +45,16 @@ const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, k
 }, "");
 const displayNameToKebabCase = (displayName) => {
   const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
-  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
+  const sections = displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-");
+  return `ds-${sections}`;
 };
 const displayNameToPropCase = (displayName) => `ds${displayName.slice(2).split("-").map(capitalize).join("")}`;
 const isComponentNameCapitalized = (name, prefix) => {
-  const currentName = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase()) ? name.slice(prefix.length) : name;
-  const capitalizedName = capitalize(currentName.toLocaleLowerCase());
-  if (currentName !== capitalizedName) {
+  const nameWithoutPrefix = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase()) ? name.slice(prefix.length) : name;
+  const nameWithOnlyStartingCapitalLetterRestLowercase = capitalize(nameWithoutPrefix.toLocaleLowerCase());
+  if (nameWithoutPrefix !== nameWithOnlyStartingCapitalLetterRestLowercase) {
     throw new Error(
-      `Do not use CamelCase for component names. '${currentName}' should be renamed to '${capitalizedName}'`
+      `Do not use CamelCase for component names. '${nameWithoutPrefix}' should be renamed to '${nameWithOnlyStartingCapitalLetterRestLowercase}'`
     );
   }
 };

package/dist/cjs/styled/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/helpers.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["const capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n\nexport const displayNameToPropCase = (displayName: string) =>\n  `ds${displayName.slice(2).split('-').map(capitalize).join('')}`;\n\nconst isComponentNameCapitalized = (name: string, prefix: string) => {\n  // Remove the \"DS\" prefix if present\n  const currentName = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase())\n    ? name.slice(prefix.length)\n    : name;\n  const capitalizedName = capitalize(currentName.toLocaleLowerCase());\n  // Check if a component name is capitalized after removing the \"DS\" prefix\n  // e.g.: DSMyComponent should be named DSMycomponent (\"Mycomponent\" is capitalized)\n  // otherwise an error is thrown\n  if (currentName !== capitalizedName) {\n    throw new Error(\n      `Do not use CamelCase for component names. '${currentName}' should be renamed to '${capitalizedName}'`,\n    );\n  }\n};\n\nexport const slotObjectToDataTestIds = (\n  componentName: string,\n  slotObject: Record<string, string>,\n): Record<string, string> => {\n  isComponentNameCapitalized(componentName, 'ds');\n  const obj = {} as Record<string, string>;\n  Object.keys(slotObject).forEach((slotName) => {\n    const displayName = `${componentName}-${slotObject[slotName]}`;\n    obj[slotName] = displayNameToKebabCase(displayName);\n  });\n  return obj;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,CAAC,GAAG,WAAW,MAAM,GAAG,EAAE,SAAS,CAAC,CAAC;AAC5G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC;AACtF;AAEO,MAAM,wBAAwB,CAAC,gBACpC,KAAK,YAAY,MAAM,CAAC,EAAE,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,KAAK,EAAE,CAAC;AAE/D,MAAM,6BAA6B,CAAC,MAAc,WAAmB;AAEnE,QAAM,cAAc,KAAK,kBAAkB,EAAE,WAAW,OAAO,kBAAkB,CAAC,IAC9E,KAAK,MAAM,OAAO,MAAM,IACxB;AACJ,QAAM,kBAAkB,WAAW,YAAY,kBAAkB,CAAC;AAIlE,MAAI,gBAAgB,iBAAiB;AACnC,UAAM,IAAI;AAAA,MACR,8CAA8C,WAAW,2BAA2B,eAAe;AAAA,IACrG;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,6BAA2B,eAAe,IAAI;AAC9C,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,aAAa,IAAI,WAAW,QAAQ,CAAC;AAC5D,QAAI,QAAQ,IAAI,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = <S extends string = string>(displayName: S) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n  const sections = displayNameSplitOnUppercase\n    .map((part) => part.toLowerCase())\n    .join('-') as TypescriptHelpersT.KebabCaseString<TypescriptHelpersT.RemoveAnyDSPrefix<S>>;\n\n  return `ds-${sections}` as const;\n};\n\nexport const displayNameToPropCase = <S extends string = string>(displayName: S) =>\n  `ds${displayName.slice(2).split('-').map(capitalize).join('') as TypescriptHelpersT.SnakeToPascalCase<KebabToSnakeCase<TypescriptHelpersT.RemoveAnyDSPrefix<S>>>}`;\n\nconst isComponentNameCapitalized = (name: string, prefix: string) => {\n  // Remove the \"DS\" prefix if present\n  const nameWithoutPrefix = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase())\n    ? name.slice(prefix.length)\n    : name;\n  const nameWithOnlyStartingCapitalLetterRestLowercase = capitalize(nameWithoutPrefix.toLocaleLowerCase());\n  // Check if a component name is capitalized after removing the \"DS\" prefix\n  // e.g.: DSMyComponent should be named DSMycomponent (\"Mycomponent\" is capitalized)\n  // otherwise an error is thrown\n  if (nameWithoutPrefix !== nameWithOnlyStartingCapitalLetterRestLowercase) {\n    throw new Error(\n      `Do not use CamelCase for component names. '${nameWithoutPrefix}' should be renamed to '${nameWithOnlyStartingCapitalLetterRestLowercase}'`,\n    );\n  }\n};\n\nexport const slotObjectToDataTestIds = <\n  T extends Record<string, string> = Record<string, string>,\n  ComponentName extends string = string,\n>(\n  componentName: ComponentName,\n  slotObject: T,\n): { [K in keyof T]: ReturnType<typeof displayNameToKebabCase<`${ComponentName}-${T[K]}`>> } => {\n  isComponentNameCapitalized(componentName, 'ds');\n  const obj = {} as { [K in keyof T]: ReturnType<typeof displayNameToKebabCase<`${ComponentName}-${T[K]}`>> };\n  Object.keys(slotObject).forEach((slotName: keyof T) => {\n    const displayName = `${componentName}-${slotObject[slotName]}` as const;\n    obj[slotName] = displayNameToKebabCase<typeof displayName>(displayName);\n  });\n  return obj;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,CAAC,GAAG,WAAW,MAAM,GAAG,EAAE,SAAS,CAAC,CAAC;AAC5G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAA4B,gBAAmB;AAEnF,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAC1E,QAAM,WAAW,4BACd,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAChC,KAAK,GAAG;AAEX,SAAO,MAAM,QAAQ;AACvB;AAEO,MAAM,wBAAwB,CAA4B,gBAC/D,KAAK,YAAY,MAAM,CAAC,EAAE,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,KAAK,EAAE,CAAoG;AAElK,MAAM,6BAA6B,CAAC,MAAc,WAAmB;AAEnE,QAAM,oBAAoB,KAAK,kBAAkB,EAAE,WAAW,OAAO,kBAAkB,CAAC,IACpF,KAAK,MAAM,OAAO,MAAM,IACxB;AACJ,QAAM,iDAAiD,WAAW,kBAAkB,kBAAkB,CAAC;AAIvG,MAAI,sBAAsB,gDAAgD;AACxE,UAAM,IAAI;AAAA,MACR,8CAA8C,iBAAiB,2BAA2B,8CAA8C;AAAA,IAC1I;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B,CAIrC,eACA,eAC8F;AAC9F,6BAA2B,eAAe,IAAI;AAC9C,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAsB;AACrD,UAAM,cAAc,GAAG,aAAa,IAAI,WAAW,QAAQ,CAAC;AAC5D,QAAI,QAAQ,IAAI,uBAA2C,WAAW;AAAA,EACxE,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/styled/styledFunction.js

@@ -47,7 +47,8 @@ var import_system = require("./system.js");
 var import_transformers = require("./transformers/index.js");
 const defaultOptions = {
   name: null,
-  slot: null
+  slot: null,
+  preserveLegacyDataTestId: false
 };
 const styledFunction = (tag, options = defaultOptions) => {
   const { name: componentName, slot: componentSlot } = options;
@@ -90,7 +91,8 @@ const styledFunction = (tag, options = defaultOptions) => {
         ...resultingObjectWithCallbackMerged,
         // ref: ref,
         ref: mergedRef,
-        innerRef: mergedRef
+        innerRef: mergedRef,
+        didDefinedGetOwnerProps: !!getOwnerProps
       };
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...propsWithRefMerged });
     };
@@ -102,14 +104,14 @@ const styledFunction = (tag, options = defaultOptions) => {
     return ComponentWithRefsMerged;
   };
   const styledAttributes = {
-    attrs: (...args) => {
+    attrs: ((...args) => {
       baseStyledResolver.attrs(...args);
       return dsStyledResolver;
-    },
-    withConfig: (...args) => {
+    }),
+    withConfig: ((...args) => {
       baseStyledResolver.withConfig(...args);
       return dsStyledResolver;
-    }
+    })
   };
   return Object.assign(dsStyledResolver, styledAttributes);
 };

package/dist/cjs/styled/styledFunction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/styledFunction.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useMemo } from 'react';\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  InnerRefInterface,\n  Options,\n  OwnerInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <\n  C extends AnyStyledComponent | keyof React.JSX.IntrinsicElements | React.ComponentType<any>,\n>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwJV;AArJb,mBAA+B;AAE/B,mCAAsC;AACtC,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,gCAA6B;AAC7B,kCAAuC;AACvC,4BAA+B;AAC/B,uBAA0B;AAC1B,qBAA8D;AAC9D,oBAAqC;AACrC,0BAA8D;AAU9D,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAG5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,yCAAqC,gDAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,kCAAkC;AAOhH,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,WAAO,uCAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,WAAO,sCAAsB,WAAW,IAAI;AAEnF,YAAM,gBAAY,wCAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,wCAAoC,sCAAe,OAAO,SAAS;AAEzE,YAAM,gBAAY;AAAA,QAChB,UAAM,4BAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAQA,aAAO,4CAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AAExD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useMemo } from 'react';\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  InnerRefInterface,\n  Options,\n  OwnerInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n  preserveLegacyDataTestId: false,\n};\n\nexport const styledFunction = <\n  C extends AnyStyledComponent | keyof React.JSX.IntrinsicElements | React.ComponentType<any>,\n>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n        didDefinedGetOwnerProps: !!getOwnerProps,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0JV;AAvJb,mBAA+B;AAE/B,mCAAsC;AACtC,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,gCAA6B;AAC7B,kCAAuC;AACvC,4BAA+B;AAC/B,uBAA0B;AAC1B,qBAA8D;AAC9D,oBAAqC;AACrC,0BAA8D;AAU9D,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,0BAA0B;AAC5B;AAEO,MAAM,iBAAiB,CAG5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,yCAAqC,gDAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,kCAAkC;AAOhH,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,WAAO,uCAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,WAAO,sCAAsB,WAAW,IAAI;AAEnF,YAAM,gBAAY,wCAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,wCAAoC,sCAAe,OAAO,SAAS;AAEzE,YAAM,gBAAY;AAAA,QAChB,UAAM,4BAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,QACV,yBAAyB,CAAC,CAAC;AAAA,MAC7B;AAQA,aAAO,4CAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AAExD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,QAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,aAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
   "names": ["baseStyled"]
 }

package/dist/cjs/styled/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/types.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport type React from 'react';\nimport type { ElementType, Ref } from 'react';\nimport type {\n  AnyStyledComponent,\n  CSSObject,\n  Interpolation,\n  InterpolationFunction,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n} from 'styled-components';\n\nexport interface Options {\n  name: string | null;\n  slot: string | null;\n}\n\nexport interface Theme extends PuiTheme {\n  layoutMode?: 'l' | 'm' | 's' | 'xs';\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\nexport type AnyStyledRef<T extends HTMLElement> =\n  | React.MutableRefObject<T | null>\n  | ((_ref: T | null) => void)\n  | false\n  | null;\n\nexport type StyleArg<T = any> = TemplateStringsArray | CSSObject | InterpolationFunction<T>;\nexport type Expression<T = any> = Interpolation<T>;\nexport type Expressions<T = any> = Array<Expression<T>>;\nexport type ThemedExpression<T = unknown> = Interpolation<ThemedStyledProps<T, Theme>>;\nexport type PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\ntype ComponentInnerRef<T extends ElementType> = T extends new (props: infer P) => React.Component<any, any>\n  ? Ref<InstanceType<T>> | undefined\n  : React.PropsWithRef<React.ComponentProps<T>>['ref'];\n\nexport type StyledComponentInnerRef<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> =\n  C extends AnyStyledComponent ? ComponentInnerRef<StyledComponentInnerComponent<C>> : ComponentInnerRef<C>;\n\nexport interface ThemedStyledFunctionBase<\n  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = {},\n  A extends keyof any = never,\n> {\n  <U extends object>(\n    first: StyleArg<\n      ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>\n    >,\n    ...rest: Expressions<\n      ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>\n    >\n  ): StyledComponent<C, T, O & U & OwnerInterface & InnerRefInterface<C>, A>;\n}\n\nexport type AttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport type InternalAttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<\n    StyledComponentInnerComponent<React.ComponentType<T & { ref?: AnyStyledRef<HTMLElement> }>>\n  >,\n  meta: {\n    options: Options;\n    displayName: string | null;\n  },\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport interface InnerRefInterface<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> {\n  innerRef?: StyledComponentInnerRef<C>;\n  ref?: never;\n}\n\nexport interface OwnerInterface {\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport type PartProps = Record<string, unknown> | ((args: object) => Record<string, unknown>) | null | undefined;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport type React from 'react';\nimport type { ElementType, Ref } from 'react';\nimport type {\n  AnyStyledComponent,\n  CSSObject,\n  Interpolation,\n  InterpolationFunction,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n} from 'styled-components';\n\nexport interface Options {\n  name: string | null;\n  slot: string | null;\n  preserveLegacyDataTestId?: boolean;\n}\n\nexport interface Theme extends PuiTheme {\n  layoutMode?: 'l' | 'm' | 's' | 'xs';\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\nexport type AnyStyledRef<T extends HTMLElement> =\n  | React.MutableRefObject<T | null>\n  | ((_ref: T | null) => void)\n  | false\n  | null;\n\nexport type StyleArg<T = any> = TemplateStringsArray | CSSObject | InterpolationFunction<T>;\nexport type Expression<T = any> = Interpolation<T>;\nexport type Expressions<T = any> = Array<Expression<T>>;\nexport type ThemedExpression<T = unknown> = Interpolation<ThemedStyledProps<T, Theme>>;\nexport type PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\ntype ComponentInnerRef<T extends ElementType> = T extends new (props: infer P) => React.Component<any, any>\n  ? Ref<InstanceType<T>> | undefined\n  : React.PropsWithRef<React.ComponentProps<T>>['ref'];\n\nexport type StyledComponentInnerRef<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> =\n  C extends AnyStyledComponent ? ComponentInnerRef<StyledComponentInnerComponent<C>> : ComponentInnerRef<C>;\n\nexport interface ThemedStyledFunctionBase<\n  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = {},\n  A extends keyof any = never,\n> {\n  <U extends object>(\n    first: StyleArg<\n      ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>\n    >,\n    ...rest: Expressions<\n      ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>\n    >\n  ): StyledComponent<C, T, O & U & OwnerInterface & InnerRefInterface<C>, A>;\n}\n\nexport type AttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport type InternalAttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<\n    StyledComponentInnerComponent<React.ComponentType<T & { ref?: AnyStyledRef<HTMLElement> }>>\n  >,\n  meta: {\n    options: Options;\n    displayName: string | null;\n  },\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport interface InnerRefInterface<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> {\n  innerRef?: StyledComponentInnerRef<C>;\n  ref?: never;\n}\n\nexport interface OwnerInterface {\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport type PartProps = Record<string, unknown> | ((args: object) => Record<string, unknown>) | null | undefined;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/styled/generated-attributes/generateAttributes.js

@@ -8,13 +8,24 @@ const generateClassName = (props, meta) => {
 };
 const generateDataTestId = (props, meta) => {
   if (meta.displayName === null) return {};
+  if (meta.options.preserveLegacyDataTestId) {
+    return props["data-testid"] ? { "data-testid": props["data-testid"] } : {};
+  }
   return {
     "data-testid": props["data-testid"] ?? displayNameToKebabCase(meta.displayName)
   };
 };
 const generateDataDimsumSlot = (props, meta) => {
   if (meta.displayName === null) return {};
+  if (!props.didDefinedGetOwnerProps) {
+    return {};
+  }
+  const finalProps = {};
+  if (props["data-dimsum-slot"]) {
+    finalProps["data-dimsum-parent-slot"] = props["data-dimsum-slot"];
+  }
   return {
+    ...finalProps,
     "data-dimsum-slot": displayNameToPropCase(meta.displayName)
   };
 };

package/dist/esm/styled/generated-attributes/generateAttributes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/generated-attributes/generateAttributes.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase, displayNameToPropCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateDataDimsumSlot: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-dimsum-slot': displayNameToPropCase(meta.displayName),\n  };\n};\n\nexport const getPartProps = (\n  props: { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface,\n): Record<string, unknown> => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  // TODO: @carusox deprecate data-testid usage in favor of data-dimsum-slot\n  const elementProps = ownerPropsValue[props['data-dimsum-slot']] ?? ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  return resultingObject;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateDataDimsumSlot, meta)];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB,6BAA6B;AAG9D,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,KAAK,uBAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,yBAA4C,CAAC,OAAO,SAAS;AACjE,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,oBAAoB,sBAAsB,KAAK,WAAW;AAAA,EAC5D;AACF;AAEO,MAAM,eAAe,CAC1B,UAC4B;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB,OAAW,QAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAGhE,QAAM,eAAe,gBAAgB,MAAM,kBAAkB,CAAC,KAAK,gBAAgB,MAAM,aAAa,CAAC;AAGvG,MAAI,iBAAiB,UAAa,iBAAiB,KAAM,QAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO,CAAC,KAAK,mBAAmB,IAAI,GAAG,KAAK,oBAAoB,IAAI,GAAG,KAAK,wBAAwB,IAAI,CAAC;AAC3G;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase, displayNameToPropCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  if (meta.options.preserveLegacyDataTestId) {\n    return props['data-testid'] ? { 'data-testid': props['data-testid'] } : {};\n  }\n\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateDataDimsumSlot: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n\n  if (!props.didDefinedGetOwnerProps) {\n    // temp disabling the warning because we don't want final app to be affected, next branch has correct logic here already, hotfix can just remove the warning\n    // if (process.env.NODE_ENV !== 'production') {\n    //   console.warn(\n    //     `The component ${meta.displayName} does not define the 'getOwnerProps' function. The 'data-dimsum-slot' attribute will not be generated.\n    //    This is required for the slot system to work correctly. Please ensure that the component is properly configured.`,\n    //   );\n    // }\n    return {};\n  }\n  const finalProps: Record<string, unknown> = {};\n  if (props['data-dimsum-slot']) {\n    finalProps['data-dimsum-parent-slot'] = props['data-dimsum-slot'];\n  }\n  return {\n    ...finalProps,\n    'data-dimsum-slot': displayNameToPropCase(meta.displayName),\n  };\n};\n\nexport const getPartProps = (\n  props: { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface,\n): Record<string, unknown> => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  // TODO: @carusox deprecate data-testid usage in favor of data-dimsum-slot\n  const elementProps = ownerPropsValue[props['data-dimsum-slot']] ?? ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  return resultingObject;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateDataDimsumSlot, meta)];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB,6BAA6B;AAG9D,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AACvC,MAAI,KAAK,QAAQ,0BAA0B;AACzC,WAAO,MAAM,aAAa,IAAI,EAAE,eAAe,MAAM,aAAa,EAAE,IAAI,CAAC;AAAA,EAC3E;AAEA,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,KAAK,uBAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,yBAA4C,CAAC,OAAO,SAAS;AACjE,MAAI,KAAK,gBAAgB,KAAM,QAAO,CAAC;AAEvC,MAAI,CAAC,MAAM,yBAAyB;AAQlC,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAsC,CAAC;AAC7C,MAAI,MAAM,kBAAkB,GAAG;AAC7B,eAAW,yBAAyB,IAAI,MAAM,kBAAkB;AAAA,EAClE;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,oBAAoB,sBAAsB,KAAK,WAAW;AAAA,EAC5D;AACF;AAEO,MAAM,eAAe,CAC1B,UAC4B;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB,OAAW,QAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAGhE,QAAM,eAAe,gBAAgB,MAAM,kBAAkB,CAAC,KAAK,gBAAgB,MAAM,aAAa,CAAC;AAGvG,MAAI,iBAAiB,UAAa,iBAAiB,KAAM,QAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO,CAAC,KAAK,mBAAmB,IAAI,GAAG,KAAK,oBAAoB,IAAI,GAAG,KAAK,wBAAwB,IAAI,CAAC;AAC3G;",
   "names": []
 }

package/dist/esm/styled/helpers.js

@@ -9,15 +9,16 @@ const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, k
 }, "");
 const displayNameToKebabCase = (displayName) => {
   const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
-  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
+  const sections = displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-");
+  return `ds-${sections}`;
 };
 const displayNameToPropCase = (displayName) => `ds${displayName.slice(2).split("-").map(capitalize).join("")}`;
 const isComponentNameCapitalized = (name, prefix) => {
-  const currentName = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase()) ? name.slice(prefix.length) : name;
-  const capitalizedName = capitalize(currentName.toLocaleLowerCase());
-  if (currentName !== capitalizedName) {
+  const nameWithoutPrefix = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase()) ? name.slice(prefix.length) : name;
+  const nameWithOnlyStartingCapitalLetterRestLowercase = capitalize(nameWithoutPrefix.toLocaleLowerCase());
+  if (nameWithoutPrefix !== nameWithOnlyStartingCapitalLetterRestLowercase) {
     throw new Error(
-      `Do not use CamelCase for component names. '${currentName}' should be renamed to '${capitalizedName}'`
+      `Do not use CamelCase for component names. '${nameWithoutPrefix}' should be renamed to '${nameWithOnlyStartingCapitalLetterRestLowercase}'`
     );
   }
 };

package/dist/esm/styled/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/helpers.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n\nexport const displayNameToPropCase = (displayName: string) =>\n  `ds${displayName.slice(2).split('-').map(capitalize).join('')}`;\n\nconst isComponentNameCapitalized = (name: string, prefix: string) => {\n  // Remove the \"DS\" prefix if present\n  const currentName = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase())\n    ? name.slice(prefix.length)\n    : name;\n  const capitalizedName = capitalize(currentName.toLocaleLowerCase());\n  // Check if a component name is capitalized after removing the \"DS\" prefix\n  // e.g.: DSMyComponent should be named DSMycomponent (\"Mycomponent\" is capitalized)\n  // otherwise an error is thrown\n  if (currentName !== capitalizedName) {\n    throw new Error(\n      `Do not use CamelCase for component names. '${currentName}' should be renamed to '${capitalizedName}'`,\n    );\n  }\n};\n\nexport const slotObjectToDataTestIds = (\n  componentName: string,\n  slotObject: Record<string, string>,\n): Record<string, string> => {\n  isComponentNameCapitalized(componentName, 'ds');\n  const obj = {} as Record<string, string>;\n  Object.keys(slotObject).forEach((slotName) => {\n    const displayName = `${componentName}-${slotObject[slotName]}`;\n    obj[slotName] = displayNameToKebabCase(displayName);\n  });\n  return obj;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,CAAC,GAAG,WAAW,MAAM,GAAG,EAAE,SAAS,CAAC,CAAC;AAC5G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC;AACtF;AAEO,MAAM,wBAAwB,CAAC,gBACpC,KAAK,YAAY,MAAM,CAAC,EAAE,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,KAAK,EAAE,CAAC;AAE/D,MAAM,6BAA6B,CAAC,MAAc,WAAmB;AAEnE,QAAM,cAAc,KAAK,kBAAkB,EAAE,WAAW,OAAO,kBAAkB,CAAC,IAC9E,KAAK,MAAM,OAAO,MAAM,IACxB;AACJ,QAAM,kBAAkB,WAAW,YAAY,kBAAkB,CAAC;AAIlE,MAAI,gBAAgB,iBAAiB;AACnC,UAAM,IAAI;AAAA,MACR,8CAA8C,WAAW,2BAA2B,eAAe;AAAA,IACrG;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,6BAA2B,eAAe,IAAI;AAC9C,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,aAAa,IAAI,WAAW,QAAQ,CAAC;AAC5D,QAAI,QAAQ,IAAI,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = <S extends string = string>(displayName: S) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n  const sections = displayNameSplitOnUppercase\n    .map((part) => part.toLowerCase())\n    .join('-') as TypescriptHelpersT.KebabCaseString<TypescriptHelpersT.RemoveAnyDSPrefix<S>>;\n\n  return `ds-${sections}` as const;\n};\n\nexport const displayNameToPropCase = <S extends string = string>(displayName: S) =>\n  `ds${displayName.slice(2).split('-').map(capitalize).join('') as TypescriptHelpersT.SnakeToPascalCase<KebabToSnakeCase<TypescriptHelpersT.RemoveAnyDSPrefix<S>>>}`;\n\nconst isComponentNameCapitalized = (name: string, prefix: string) => {\n  // Remove the \"DS\" prefix if present\n  const nameWithoutPrefix = name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase())\n    ? name.slice(prefix.length)\n    : name;\n  const nameWithOnlyStartingCapitalLetterRestLowercase = capitalize(nameWithoutPrefix.toLocaleLowerCase());\n  // Check if a component name is capitalized after removing the \"DS\" prefix\n  // e.g.: DSMyComponent should be named DSMycomponent (\"Mycomponent\" is capitalized)\n  // otherwise an error is thrown\n  if (nameWithoutPrefix !== nameWithOnlyStartingCapitalLetterRestLowercase) {\n    throw new Error(\n      `Do not use CamelCase for component names. '${nameWithoutPrefix}' should be renamed to '${nameWithOnlyStartingCapitalLetterRestLowercase}'`,\n    );\n  }\n};\n\nexport const slotObjectToDataTestIds = <\n  T extends Record<string, string> = Record<string, string>,\n  ComponentName extends string = string,\n>(\n  componentName: ComponentName,\n  slotObject: T,\n): { [K in keyof T]: ReturnType<typeof displayNameToKebabCase<`${ComponentName}-${T[K]}`>> } => {\n  isComponentNameCapitalized(componentName, 'ds');\n  const obj = {} as { [K in keyof T]: ReturnType<typeof displayNameToKebabCase<`${ComponentName}-${T[K]}`>> };\n  Object.keys(slotObject).forEach((slotName: keyof T) => {\n    const displayName = `${componentName}-${slotObject[slotName]}` as const;\n    obj[slotName] = displayNameToKebabCase<typeof displayName>(displayName);\n  });\n  return obj;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,CAAC,GAAG,WAAW,MAAM,GAAG,EAAE,SAAS,CAAC,CAAC;AAC5G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAA4B,gBAAmB;AAEnF,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAC1E,QAAM,WAAW,4BACd,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAChC,KAAK,GAAG;AAEX,SAAO,MAAM,QAAQ;AACvB;AAEO,MAAM,wBAAwB,CAA4B,gBAC/D,KAAK,YAAY,MAAM,CAAC,EAAE,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,KAAK,EAAE,CAAoG;AAElK,MAAM,6BAA6B,CAAC,MAAc,WAAmB;AAEnE,QAAM,oBAAoB,KAAK,kBAAkB,EAAE,WAAW,OAAO,kBAAkB,CAAC,IACpF,KAAK,MAAM,OAAO,MAAM,IACxB;AACJ,QAAM,iDAAiD,WAAW,kBAAkB,kBAAkB,CAAC;AAIvG,MAAI,sBAAsB,gDAAgD;AACxE,UAAM,IAAI;AAAA,MACR,8CAA8C,iBAAiB,2BAA2B,8CAA8C;AAAA,IAC1I;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B,CAIrC,eACA,eAC8F;AAC9F,6BAA2B,eAAe,IAAI;AAC9C,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAsB;AACrD,UAAM,cAAc,GAAG,aAAa,IAAI,WAAW,QAAQ,CAAC;AAC5D,QAAI,QAAQ,IAAI,uBAA2C,WAAW;AAAA,EACxE,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled/styledFunction.js

@@ -14,7 +14,8 @@ import { styled as baseStyled } from "./system.js";
 import { dsStyledComponentTransform, magicCssTransform } from "./transformers/index.js";
 const defaultOptions = {
   name: null,
-  slot: null
+  slot: null,
+  preserveLegacyDataTestId: false
 };
 const styledFunction = (tag, options = defaultOptions) => {
   const { name: componentName, slot: componentSlot } = options;
@@ -57,7 +58,8 @@ const styledFunction = (tag, options = defaultOptions) => {
         ...resultingObjectWithCallbackMerged,
         // ref: ref,
         ref: mergedRef,
-        innerRef: mergedRef
+        innerRef: mergedRef,
+        didDefinedGetOwnerProps: !!getOwnerProps
       };
       return /* @__PURE__ */ jsx(Component, { ...propsWithRefMerged });
     };
@@ -69,14 +71,14 @@ const styledFunction = (tag, options = defaultOptions) => {
     return ComponentWithRefsMerged;
   };
   const styledAttributes = {
-    attrs: (...args) => {
+    attrs: ((...args) => {
       baseStyledResolver.attrs(...args);
       return dsStyledResolver;
-    },
-    withConfig: (...args) => {
+    }),
+    withConfig: ((...args) => {
       baseStyledResolver.withConfig(...args);
       return dsStyledResolver;
-    }
+    })
   };
   return Object.assign(dsStyledResolver, styledAttributes);
 };

package/dist/esm/styled/styledFunction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styledFunction.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useMemo } from 'react';\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  InnerRefInterface,\n  Options,\n  OwnerInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <\n  C extends AnyStyledComponent | keyof React.JSX.IntrinsicElements | React.ComponentType<any>,\n>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwJV;AArJb,SAAgB,eAAe;AAE/B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,UAAU,kBAAkB;AACrC,SAAS,4BAA4B,yBAAyB;AAU9D,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAG5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,qCAAqC,2BAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,kCAAkC;AAOhH,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,OAAO,uBAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,OAAO,sBAAsB,WAAW,IAAI;AAEnF,YAAM,YAAY,aAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,oCAAoC,eAAe,OAAO,SAAS;AAEzE,YAAM,YAAY;AAAA,QAChB,MAAM,UAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAQA,aAAO,oBAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AAExD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useMemo } from 'react';\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { callbackMerger } from './generated-attributes/utils/callbackMerger.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  InnerRefInterface,\n  Options,\n  OwnerInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n  preserveLegacyDataTestId: false,\n};\n\nexport const styledFunction = <\n  C extends AnyStyledComponent | keyof React.JSX.IntrinsicElements | React.ComponentType<any>,\n>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n      // we may or not have data-testid at this point, so we need to calculate it\n      const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n      // we also need to calculate dataDimsumSlot at this point\n      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n      // then we get the part props for this slot, and we cast it to use refs\n      const partProps = getPartProps({\n        ...props,\n        'data-testid': dataTestId,\n        'data-dimsum-slot': dataDimsumSlot,\n      }) as {\n        innerRef?: AnyStyledRef<HTMLElement>;\n      };\n\n      // then we merge the callbacks from the props with the ones from the part\n      // this object also has all global props from the parts\n      const resultingObjectWithCallbackMerged = callbackMerger(props, partProps);\n\n      const mergedRef = useMemo(\n        () => mergeRefs(props.innerRef, partProps.innerRef),\n        [props.innerRef, partProps.innerRef],\n      );\n\n      // We don't want to pass the owner props to the component down the line\n      const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n      // TODO:\n      // deploy the following code and see if we break something in a dedicated effort ASAP\n      // let ref = undefined;\n      // eslint-disable-next-line  @typescript-eslint/ban-ts-comment\n      // @ts-ignore : as of thue 16 may 2024, Component.target.$$typeof is undefined for non-native react components\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      // if (typeof Component?.target === 'string') {\n      //   ref = mergedRef;\n      // }\n\n      const propsWithRefMerged = {\n        ...restProps,\n        ...resultingObjectWithCallbackMerged,\n        // ref: ref,\n        ref: mergedRef,\n        innerRef: mergedRef,\n        didDefinedGetOwnerProps: !!getOwnerProps,\n      } as React.ComponentProps<C>;\n\n      // TODO: check if we need to pass the ref to the component\n      // Check $$typeof to see if it's a react-forward-ref\n      // Check dsStyledComponentId to see if it's a styled component\n      // Check what to do with span, div, etc.\n      // Other cases should not receive ref...?\n\n      return <Component {...propsWithRefMerged} />;\n    };\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => {\n      baseStyledResolver.attrs(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => {\n      baseStyledResolver.withConfig(...args);\n      return dsStyledResolver;\n    }) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0JV;AAvJb,SAAgB,eAAe;AAE/B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,UAAU,kBAAkB;AACrC,SAAS,4BAA4B,yBAAyB;AAU9D,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,0BAA0B;AAC5B;AAEO,MAAM,iBAAiB,CAG5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,qCAAqC,2BAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,kCAAkC;AAOhH,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,OAAO,uBAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,OAAO,sBAAsB,WAAW,IAAI;AAEnF,YAAM,YAAY,aAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAMD,YAAM,oCAAoC,eAAe,OAAO,SAAS;AAEzE,YAAM,YAAY;AAAA,QAChB,MAAM,UAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAGA,YAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAWhE,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,QAEH,KAAK;AAAA,QACL,UAAU;AAAA,QACV,yBAAyB,CAAC,CAAC;AAAA,MAC7B;AAQA,aAAO,oBAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AAExD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,QAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,aAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
   "names": []
 }

package/dist/types/globalStyles.d.ts

@@ -1,3 +1,3 @@
 export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{
-    device: 'desktop' | 'mobile';
+    device: "desktop" | "mobile";
 }, import("styled-components").DefaultTheme>;

package/dist/types/styled/generated-attributes/generateAttributes.d.ts

@@ -1,6 +1,6 @@
 import type { AttrsFunc, Options, OwnerInterface } from '../types.js';
 export declare const getPartProps: (props: {
-    'data-testid': string;
-    'data-dimsum-slot': string;
+    "data-testid": string;
+    "data-dimsum-slot": string;
 } & OwnerInterface) => Record<string, unknown>;
 export declare const generateAttributes: (options: Options, displayName: string | null) => AttrsFunc<any>[];

package/dist/types/styled/helpers.d.ts

@@ -1,6 +1,7 @@
+import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 export declare const propsToClassKey: (props: Record<string, {
     toString: () => string;
 }>) => string;
-export declare const displayNameToKebabCase: (displayName: string) => string;
-export declare const displayNameToPropCase: (displayName: string) => string;
-export declare const slotObjectToDataTestIds: (componentName: string, slotObject: Record<string, string>) => Record<string, string>;
+export declare const displayNameToKebabCase: <S extends string = string>(displayName: S) => `ds-${TypescriptHelpersT.KebabCaseString<TypescriptHelpersT.RemoveAnyDSPrefix<S>>}`;
+export declare const displayNameToPropCase: <S extends string = string>(displayName: S) => string;
+export declare const slotObjectToDataTestIds: <T extends Record<string, string> = Record<string, string>, ComponentName extends string = string>(componentName: ComponentName, slotObject: T) => { [K in keyof T]: ReturnType<typeof displayNameToKebabCase<`${ComponentName}-${T[K]}`>>; };

package/dist/types/styled/styled.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare const styled: (<C extends keyof import("react").JSX.IntrinsicElements | import("react").ComponentType<any> | import("styled-components").AnyStyledComponent>(tag: C, options?: import("./types.js").Options) => import("./types.js").ThemedStyledFunctionBase<C, import("./types.js").Theme, {}, never> & {
+export declare const styled: (<C extends import("styled-components").AnyStyledComponent | keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(tag: C, options?: import("./types.js").Options) => import("./types.js").ThemedStyledFunctionBase<C, import("./types.js").Theme, {}, never> & {
     attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
         [others: string]: any;
     } = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, import("./types.js").Theme>) => NewA)) => import("styled-components").ThemedStyledFunction<C, import("./types.js").Theme, {} & NewA, string | number | symbol | keyof NewA>;

package/dist/types/styled/styledFunction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';
 import type { Options, Theme, ThemedStyledFunctionBase } from './types.js';
-export declare const styledFunction: <C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any> | AnyStyledComponent>(tag: C, options?: Options) => ThemedStyledFunctionBase<C, Theme, {}, never> & {
+export declare const styledFunction: <C extends AnyStyledComponent | keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(tag: C, options?: Options) => ThemedStyledFunctionBase<C, Theme, {}, never> & {
     attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
         [others: string]: any;
     } = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, Theme>) => NewA)) => ThemedStyledFunction<C, Theme, {} & NewA, string | number | symbol | keyof NewA>;

package/dist/types/styled/types.d.ts

@@ -5,6 +5,7 @@ import type { AnyStyledComponent, CSSObject, Interpolation, InterpolationFunctio
 export interface Options {
     name: string | null;
     slot: string | null;
+    preserveLegacyDataTestId?: boolean;
 }
 export interface Theme extends PuiTheme {
     layoutMode?: 'l' | 'm' | 's' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "3.52.1",
+  "version": "3.53.0-alpha.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -46,15 +46,16 @@
     "polished": "~3.6.7"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.63",
-    "@elliemae/pui-theme": "~2.12.0",
+    "@elliemae/pui-cli": "9.0.0-next.65",
+    "@elliemae/pui-theme": "~2.13.0",
     "jest": "~29.7.0",
     "jest-cli": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.52.1"
+    "@elliemae/ds-monorepo-devops": "3.53.0-alpha.2",
+    "@elliemae/ds-typescript-helpers": "3.53.0-alpha.2"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "~2.12.0",
+    "@elliemae/pui-theme": "~2.13.0",
     "csstype": "^3.0.0",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",