@elliemae/ds-form-toggle 3.53.0-alpha.1 → 3.53.0-alpha.2

package/dist/types/styles.d.ts

@@ -1,44 +1,44 @@
-/// <reference types="react" />
 import type { DSControlledToggleT } from './react-desc-prop-types.js';
 interface StyledContainerT {
-    size: DSControlledToggleT.ToggleSize;
+    $size: DSControlledToggleT.ToggleSize;
     disabled: boolean;
 }
-interface StyledLabelT {
-    width: number;
-    size: DSControlledToggleT.ToggleSize;
-    checked: boolean;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+interface StyledRadiusShapeT {
+    $width: number;
+    $size: DSControlledToggleT.ToggleSize;
 }
-interface StyledVisibleContentT {
-    checked: boolean;
-    size: DSControlledToggleT.ToggleSize;
-    disabled: boolean;
-    applyAriaDisabled: boolean;
-    readOnly: boolean;
-    as: 'p' | 'label';
-    htmlFor: string;
+export declare const StyledRadiusShape: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledRadiusShapeT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+interface StyledButtonContentWrapperT {
+    $checked: boolean;
+    $size: DSControlledToggleT.ToggleSize;
+    $disabled: boolean;
+    $applyAriaDisabled: boolean;
+    $readOnly: boolean;
 }
+export declare const StyledButtonContentWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledButtonContentWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 interface StyledCircleT {
-    size: DSControlledToggleT.ToggleSize;
-    readOnly: boolean;
-    checked: boolean;
-    disabled: boolean;
+    $size: DSControlledToggleT.ToggleSize;
+    $readOnly: boolean;
+    $applyAriaDisabled: boolean;
 }
-interface StyledTextT {
-    isLongerTextRendering: boolean;
-    size: DSControlledToggleT.ToggleSize;
-    checked: boolean;
-    disabled: boolean;
-    applyAriaDisabled: boolean;
+export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCircleT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+interface StyledTextWrapperT {
+    $size: DSControlledToggleT.ToggleSize;
+    $disabled: boolean;
 }
+export declare const StyledTextWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTextWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
 interface SetLabelWidthT {
-    size: DSControlledToggleT.ToggleSize;
+    $size: DSControlledToggleT.ToggleSize;
 }
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledLabelT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledVisibleContent: import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Partial<StyledVisibleContentT>>;
-export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCircleT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledText: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTextT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+/**
+ * This should not be required, we are doing this to keep the wcagViolationLabelOn/wcagViolationLabelOff working
+ *   this calculates the width of the widest custom label and sets the width of both labels to that width to avoid layout shift on toggle
+ *
+ * ---
+ *
+ * this can be safely removed in favor of a sensible default min-width for the accessible ON/OFF labels when we can actually kill the wcagViolationLabelOn/wcagViolationLabelOff props
+ */
 export declare const SetLabelWidth: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, SetLabelWidthT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export {};

package/dist/types/tests/DSControlledToggle.app-sdk-compatibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSControlledToggle.data-testId.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/styleHelpers.d.ts

@@ -25,17 +25,17 @@ export declare const borderRadius: {
     m: string;
     l: string;
 };
-export declare const handleFontSize: (size: DSControlledToggleT.ToggleSize, { fontSizes }: PropsWithTheme['theme']) => string;
+export declare const handleFontSize: (size: DSControlledToggleT.ToggleSize, { fontSizes }: PropsWithTheme["theme"]) => string;
 export declare const getInterpolatedBgDsToggleColorByProps: (props: PropsWithTheme<{
-    checked: boolean;
-    disabled: boolean;
-    applyAriaDisabled: boolean;
-    readOnly: boolean;
+    $checked: boolean;
+    $disabled: boolean;
+    $applyAriaDisabled: boolean;
+    $readOnly: boolean;
 }>) => string;
 export declare const getInterpolatedBorderDsToggleColorByProps: (props: PropsWithTheme<{
-    checked: boolean;
-    disabled: boolean;
-    applyAriaDisabled: boolean;
-    readOnly: boolean;
+    $checked: boolean;
+    $disabled: boolean;
+    $applyAriaDisabled: boolean;
+    $readOnly: boolean;
 }>) => string;
 export declare const handleCursors: (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-toggle",
-  "version": "3.53.0-alpha.1",
+  "version": "3.53.0-alpha.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Toggle",
   "files": [
@@ -38,25 +38,22 @@
   "dependencies": {
     "lodash-es": "^4.17.21",
     "styled-components": "~5.3.9",
-    "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.53.0-alpha.1",
-    "@elliemae/ds-system": "3.53.0-alpha.1",
-    "@elliemae/ds-props-helpers": "3.53.0-alpha.1",
-    "@elliemae/ds-tooltip-v3": "3.53.0-alpha.1"
+    "uid": "^2.0.2",
+    "@elliemae/ds-button-v2": "3.53.0-alpha.2",
+    "@elliemae/ds-props-helpers": "3.53.0-alpha.2",
+    "@elliemae/ds-system": "3.53.0-alpha.2"
   },
   "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",
-    "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.53.0-alpha.1"
+    "@elliemae/ds-monorepo-devops": "3.53.0-alpha.2",
+    "@elliemae/ds-test-utils": "3.53.0-alpha.2"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "~2.12.0",
-    "lodash-es": "^4.17.21",
+    "@elliemae/pui-theme": "~2.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "~5.3.9",
     "styled-system": "^5.1.5"
   },
   "publishConfig": {

package/dist/cjs/DSFormToggleDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSFormToggleDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSFormToggleName = 'DSFormToggle';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;",
-  "names": []
-}

package/dist/cjs/parts/AddTooltipOnReadOnly.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/parts/AddTooltipOnReadOnly.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\n\nexport const AddTooltipOnReadOnly = ({ readOnly, children }: { readOnly: boolean; children: React.ReactNode }) => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return children;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIA;AAHvB,2BAA4B;AAErB,MAAM,uBAAuB,CAAC,EAAE,UAAU,SAAS,MAAwD;AAChH,MAAI,SAAU,QAAO,4CAAC,oCAAY,MAAK,aAAa,UAAS;AAC7D,SAAO;AACT;",
-  "names": []
-}

package/dist/esm/DSFormToggleDefinitions.js

@@ -1,6 +0,0 @@
-import * as React from "react";
-const DSFormToggleName = "DSFormToggle";
-export {
-  DSFormToggleName
-};
-//# sourceMappingURL=DSFormToggleDefinitions.js.map

package/dist/esm/DSFormToggleDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFormToggleDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSFormToggleName = 'DSFormToggle';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,mBAAmB;",
-  "names": []
-}

package/dist/esm/parts/AddTooltipOnReadOnly.js

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
-const AddTooltipOnReadOnly = ({ readOnly, children }) => {
-  if (readOnly) return /* @__PURE__ */ jsx(DSTooltipV3, { text: "Read Only", children });
-  return children;
-};
-export {
-  AddTooltipOnReadOnly
-};
-//# sourceMappingURL=AddTooltipOnReadOnly.js.map

package/dist/esm/parts/AddTooltipOnReadOnly.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AddTooltipOnReadOnly.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\n\nexport const AddTooltipOnReadOnly = ({ readOnly, children }: { readOnly: boolean; children: React.ReactNode }) => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return children;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIA;AAHvB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC,EAAE,UAAU,SAAS,MAAwD;AAChH,MAAI,SAAU,QAAO,oBAAC,eAAY,MAAK,aAAa,UAAS;AAC7D,SAAO;AACT;",
-  "names": []
-}

package/dist/types/DSFormToggleDefinitions.d.ts

@@ -1 +0,0 @@
-export declare const DSFormToggleName = "DSFormToggle";

package/dist/types/parts/AddTooltipOnReadOnly.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const AddTooltipOnReadOnly: ({ readOnly, children }: {
-    readOnly: boolean;
-    children: React.ReactNode;
-}) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;