@elliemae/ds-form-checkbox 3.16.0-next.2 → 3.16.0-next.21

package/dist/esm/utils/styleHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[400];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 7px;\n  left: 4px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: ${theme.space.xxs};\n  height: 2px;\n`;\n\n  const normalMixedCheckmark = `\n  @media (max-width: ${theme.breakpoints.small}) {\n    top:11px;\n    left:6px;\n    height:2px;\n    width:12px;\n  }\n  ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  top:11px;\n  left:6px;\n  height:2px;\n  width:12px;\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 4px;\nleft: 3px;\nborder-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 5px;\nwidth: 10px;\ntransform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 6px;\n  left: 4px;\n  height: 8px;\n  width: 17px;\n}\n${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n${desktopCheckmark}\ntop: 6px;\nleft: 4px;\nheight: 8px;\nwidth: 17px;\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,uBACR,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC;AAAA;AAEF,QAAM,uBAAuB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,2BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtG,QAAM,kBAAkB;AAAA,qBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA;AAEA,QAAM,kBAAkB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 7px;\n  left: 4px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: ${theme.space.xxs};\n  height: 2px;\n`;\n\n  const normalMixedCheckmark = `\n  @media (max-width: ${theme.breakpoints.small}) {\n    top:11px;\n    left:6px;\n    height:2px;\n    width:12px;\n  }\n  ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  top:11px;\n  left:6px;\n  height:2px;\n  width:12px;\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 4px;\nleft: 3px;\nborder-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 5px;\nwidth: 10px;\ntransform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 6px;\n  left: 4px;\n  height: 8px;\n  width: 17px;\n}\n${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n${desktopCheckmark}\ntop: 6px;\nleft: 4px;\nheight: 8px;\nwidth: 17px;\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,uBACR,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC;AAAA;AAEF,QAAM,uBAAuB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,2BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtG,QAAM,kBAAkB;AAAA,qBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA;AAEA,QAAM,kBAAkB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-checkbox",
-  "version": "3.16.0-next.2",
+  "version": "3.16.0-next.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Checkbox",
   "files": [
@@ -35,21 +35,22 @@
     "indent": 4
   },
   "dependencies": {
-    "uid": "~2.0.0",
-    "@elliemae/ds-system": "3.16.0-next.2",
-    "@elliemae/ds-truncated-tooltip-text": "3.16.0-next.2",
-    "@elliemae/ds-utilities": "3.16.0-next.2"
+    "uid": "~2.0.1",
+    "@elliemae/ds-props-helpers": "3.16.0-next.21",
+    "@elliemae/ds-system": "3.16.0-next.21",
+    "@elliemae/ds-truncated-tooltip-text": "3.16.0-next.21",
+    "@elliemae/ds-utilities": "3.16.0-next.21"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.6.0",
+    "@elliemae/pui-theme": "~2.7.0",
     "@testing-library/dom": "~8.19.0",
-    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "~2.6.0",
+    "@elliemae/pui-theme": "~2.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "~5.3.6",
@@ -67,7 +68,7 @@
     "dts": "node ../../scripts/dts.mjs",
     "dts:withdeps": "pnpm --filter {.}... dts",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
-    "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
+    "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }

package/dist/types/ControlledCheckbox.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { DSControlledCheckboxT } from './react-desc-prop-types';
-declare const DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props>;
-declare const DSControlledCheckboxWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSControlledCheckboxT.Props>;
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema };

package/dist/types/ControlledCheckboxCTX.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { ControlledCheckboxCTX } from './config/useCheckBox';
-/** Context for cross component communication */
-export declare const ControlledCheckBoxContext: import("react").Context<ControlledCheckboxCTX>;
-export default ControlledCheckBoxContext;

package/dist/types/config/useCheckBox.d.ts

@@ -1,10 +0,0 @@
-import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';
-import type { DSControlledCheckboxT } from '../react-desc-prop-types';
-import { useEventHandlers } from './useEventHandlers';
-export interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {
-    propsWithDefault: DSControlledCheckboxT.InternalProps;
-    globalProps: ReturnType<typeof useGetGlobalAttributes>;
-    xstyledProps: ReturnType<typeof useGetXstyledProps>;
-    instanceUid: string;
-}
-export declare const useCheckBox: (props: DSControlledCheckboxT.Props) => ControlledCheckboxCTX;

package/dist/types/config/useEventHandlers.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { DSControlledCheckboxT } from '../react-desc-prop-types';
-export declare const useEventHandlers: (props: DSControlledCheckboxT.InternalProps) => {
-    handleOnChange: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLabelElement> | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
-    handleMixedCheckboxOnKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
-};

package/dist/types/config/useValidateProps.d.ts

@@ -1,3 +0,0 @@
-import type { WeakValidationMap } from 'react';
-import type { DSControlledCheckboxT } from '../react-desc-prop-types';
-export declare const useValidateProps: (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>) => void;

package/dist/types/constants/device.d.ts

@@ -1,4 +0,0 @@
-export declare const DEVICE: {
-    readonly MOBILE: "mobile";
-    readonly DESKTOP: "desktop";
-};

package/dist/types/exported-related/data-test-ids.d.ts

@@ -1,4 +0,0 @@
-export declare const DSCheckboxDataTestIds: {
-    readonly CONTAINER: "ds-checkbox-container";
-    readonly INPUT: "ds-checkbox";
-};

package/dist/types/exported-related/index.d.ts

@@ -1,2 +0,0 @@
-export * from './data-test-ids';
-export * from './theming';

package/dist/types/exported-related/theming.d.ts

@@ -1,6 +0,0 @@
-export declare const DSCheckboxName: "DSCheckbox";
-export declare const DSCheckboxSlots: {
-    readonly CONTAINER: "root";
-    readonly INPUT: "input";
-    readonly LABEL: "label";
-};

package/dist/types/index.d.ts

@@ -1,2 +0,0 @@
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox';
-export type { DSControlledCheckboxT } from './react-desc-prop-types';

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

@@ -1 +0,0 @@
-export declare const ControlledCheckBoxContent: () => JSX.Element;

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

@@ -1 +0,0 @@
-export declare const MainInput: () => JSX.Element;