@elliemae/ds-form-checkbox 3.22.0-next.8 → 3.22.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ControlledCheckbox.js.map +1 -1
- package/dist/cjs/ControlledCheckboxCTX.js.map +1 -1
- package/dist/cjs/config/useCheckBox.js.map +1 -1
- package/dist/cjs/config/useEventHandlers.js.map +1 -1
- package/dist/cjs/config/useValidateProps.js.map +1 -1
- package/dist/cjs/constants/device.js.map +1 -1
- package/dist/cjs/exported-related/data-test-ids.js.map +1 -1
- package/dist/cjs/exported-related/index.js.map +1 -1
- package/dist/cjs/exported-related/theming.js.map +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/ControlledCheckBoxContent.js.map +1 -1
- package/dist/cjs/parts/MainInput.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/cjs/utils/styleHelpers.js.map +1 -1
- package/dist/esm/ControlledCheckbox.js.map +1 -1
- package/dist/esm/ControlledCheckboxCTX.js.map +1 -1
- package/dist/esm/config/useCheckBox.js.map +1 -1
- package/dist/esm/config/useEventHandlers.js.map +1 -1
- package/dist/esm/config/useValidateProps.js.map +1 -1
- package/dist/esm/constants/device.js.map +1 -1
- package/dist/esm/exported-related/data-test-ids.js.map +1 -1
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/ControlledCheckBoxContent.js.map +1 -1
- package/dist/esm/parts/MainInput.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/utils/styleHelpers.js.map +1 -1
- package/package.json +13 -13
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/ControlledCheckbox.tsx", "
|
|
3
|
+
"sources": ["../../src/ControlledCheckbox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { useCheckBox } from './config/useCheckBox.js';\nimport { ControlledCheckBoxContext } from './ControlledCheckboxCTX.js';\nimport { ControlledCheckBoxContent } from './parts/ControlledCheckBoxContent.js';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const ctx = useCheckBox(props);\n return (\n <ControlledCheckBoxContext.Provider value={ctx}>\n <ControlledCheckBoxContent />\n </ControlledCheckBoxContext.Provider>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAXN,8BAAyB;AAEzB,mCAA0B;AAC1B,yBAA4B;AAC5B,mCAA0C;AAC1C,uCAA0C;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,uDAA0B,UAA1B,EAAmC,OAAO,KACzC,sDAAC,8DAA0B,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,qCAAiC,kCAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/ControlledCheckboxCTX.ts", "
|
|
3
|
+
"sources": ["../../src/ControlledCheckboxCTX.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { createContext } from 'react';\nimport type { ControlledCheckboxCTX } from './config/useCheckBox.js';\n\nconst defaultContext = {} as ControlledCheckboxCTX;\n\n/** Context for cross component communication */\nexport const ControlledCheckBoxContext = createContext<ControlledCheckboxCTX>(defaultContext);\n\nexport default ControlledCheckBoxContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,gCAA4B,4BAAqC,cAAc;AAE5F,IAAO,gCAAQ;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useCheckBox.tsx", "
|
|
3
|
+
"sources": ["../../../src/config/useCheckBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\nimport { propTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useEventHandlers } from './useEventHandlers.js';\n\nexport interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {\n propsWithDefault: DSControlledCheckboxT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useCheckBox = (props: DSControlledCheckboxT.Props): ControlledCheckboxCTX => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledCheckboxT.InternalProps>(props, defaultProps);\n useValidateProps(props, propTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledCheckboxT.InternalProps>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { id } = globalProps;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const eventHandlers = useEventHandlers(propsWithDefault);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n ...eventHandlers,\n }),\n [eventHandlers, globalProps, instanceUid, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AACzF,iBAAoB;AAEpB,mCAAwC;AACxC,8BAAiC;AACjC,8BAAiC;AAS1B,MAAM,cAAc,CAAC,UAA8D;AAIxF,QAAM,uBAAmB,sDAAkE,OAAO,yCAAY;AAC9G,gDAAiB,OAAO,sCAAS;AAIjC,QAAM,kBAAc,gDAA4D,gBAAgB;AAChG,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAK1D,QAAM,oBAAgB,0CAAiB,gBAAgB;AAEvD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa,aAAa,kBAAkB,YAAY;AAAA,EAC1E;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useEventHandlers.tsx", "
|
|
3
|
+
"sources": ["../../../src/config/useEventHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useEventHandlers = (props: DSControlledCheckboxT.InternalProps) => {\n const { checked, onChange, onKeyDown, readOnly } = props;\n const handleOnChange = React.useCallback(\n (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => {\n if (onChange && !readOnly) {\n if (checked === 'mixed') onChange(true, e);\n if (checked === true) onChange(false, e);\n if (checked === false) onChange(true, e);\n }\n },\n [checked, onChange, readOnly],\n );\n const handleMixedCheckboxOnKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (onKeyDown) {\n // if user provides 'onKeyDown' event, he is in charge of what happens\n onKeyDown(e);\n }\n if ((e.code === 'Space' || e.code === 'Enter') && !readOnly) {\n handleOnChange(e);\n e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\n }\n },\n [handleOnChange, onKeyDown, readOnly],\n );\n\n return React.useMemo(\n () => ({\n handleOnChange,\n handleMixedCheckboxOnKeyDown,\n }),\n [handleMixedCheckboxOnKeyDown, handleOnChange],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGX,MAAM,mBAAmB,CAAC,UAA+C;AAC9E,QAAM,EAAE,SAAS,UAAU,WAAW,SAAS,IAAI;AACnD,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CACE,MAKG;AACH,UAAI,YAAY,CAAC,UAAU;AACzB,YAAI,YAAY;AAAS,mBAAS,MAAM,CAAC;AACzC,YAAI,YAAY;AAAM,mBAAS,OAAO,CAAC;AACvC,YAAI,YAAY;AAAO,mBAAS,MAAM,CAAC;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,SAAS,UAAU,QAAQ;AAAA,EAC9B;AACA,QAAM,+BAA+B,aAAAA,QAAM;AAAA,IACzC,CAAC,MAA2C;AAC1C,UAAI,WAAW;AAEb,kBAAU,CAAC;AAAA,MACb;AACA,WAAK,EAAE,SAAS,WAAW,EAAE,SAAS,YAAY,CAAC,UAAU;AAC3D,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,WAAW,QAAQ;AAAA,EACtC;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,cAAc;AAAA,EAC/C;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useValidateProps.tsx", "
|
|
3
|
+
"sources": ["../../../src/config/useValidateProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../exported-related/index.js';\nimport type { WeakValidationMap } from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAC/C,8BAA+B;AAIxB,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,8DAA+B,OAAO,WAAW,sCAAc;AACjE;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/constants/device.ts", "
|
|
3
|
+
"sources": ["../../../src/constants/device.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DEVICE = {\n MOBILE: 'mobile',\n DESKTOP: 'desktop',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,EACR,SAAS;AACX;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/exported-related/data-test-ids.ts", "
|
|
3
|
+
"sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSCheckboxDataTestIds = {\n CONTAINER: 'ds-checkbox-container',\n INPUT: 'ds-checkbox',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/exported-related/index.ts", "
|
|
3
|
+
"sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './data-test-ids.js';\nexport * from './theming.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,+BAAd;AACA,qCAAc,yBADd;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/exported-related/theming.ts", "
|
|
3
|
+
"sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "
|
|
3
|
+
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\n\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport const DSControlledCheckbox = ({ ...props }) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }) => <Checkbox {...props} visualOnly />;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADK+B;AALtD,gCAAiD;AAEjD,wBAAc,wCAFd;AAIA,IAAAA,6BAA+C;AACxC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAM,4CAAC,0BAAAC,sBAAA,EAAU,GAAG,OAAO;AACpE,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAM,4CAAC,0BAAAA,sBAAA,EAAU,GAAG,OAAO,YAAU,MAAC;",
|
|
6
6
|
"names": ["import_ControlledCheckbox", "Checkbox"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "
|
|
3
|
+
"sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n React.useContext(ControlledCheckBoxContext);\n const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n return (\n <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n <MainInput />\n </StyledCheckBox>\n {label && (\n <StyledLabel\n id={`${instanceUid}_label`}\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkB;AAClB,uCAA2C;AAC3C,oBAA8E;AAC9E,uBAA0B;AAC1B,mCAA0C;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,SACE,6CAAC,iCAAgB,QAAgB,eAAY,yBAAwB,WAAuB,GAAG,cAC7F;AAAA,gDAAC,gCAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,sDAAC,8BAAU,GACb;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,QAEvF,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/MainInput.tsx", "
|
|
3
|
+
"sources": ["../../../src/parts/MainInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n React.useContext(ControlledCheckBoxContext);\n const {\n disabled,\n readOnly,\n // label,\n tabIndex,\n innerRef,\n checked,\n visualOnly,\n ariaControls: camelCaseAriaControls,\n // ariaLabel: camelCaseAriaLabel,\n // externalLabel,\n } = propsWithDefault;\n const { 'aria-controls': ariaControls } = globalProps;\n\n // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n // so\n // if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n // if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n // props slightly differ because of this\n // also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n const canShowMixedState = ariaControls || camelCaseAriaControls;\n\n const mainInputProps = {\n id: instanceUid,\n 'data-testid': 'ds-checkbox',\n 'aria-labelledby': `${instanceUid}_label ${instanceUid}_block_label`,\n 'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n ...globalProps, // any props provided by the user will over-ride ours\n };\n\n if (visualOnly) return null;\n\n if (canShowMixedState)\n return (\n <StyledInputMixed\n {...mainInputProps}\n role=\"checkbox\"\n aria-controls={ariaControls || camelCaseAriaControls}\n aria-disabled={disabled}\n onClick={!disabled && !readOnly ? handleOnChange : undefined}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n tabIndex={disabled ? -1 : tabIndex}\n ref={innerRef}\n onMouseDown={(e: React.MouseEvent) => {\n if (disabled) e.preventDefault();\n }}\n />\n );\n return (\n <StyledInput\n {...mainInputProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={handleOnChange}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n disabled={disabled}\n tabIndex={tabIndex}\n ref={innerRef}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCjB;AAzCN,mBAAkB;AAClB,oBAA8C;AAC9C,mCAA0C;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/F,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA;AAAA;AAAA,EAGhB,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB,GAAG,qBAAqB;AAAA,IAC3C,gBAAgB;AAAA;AAAA,IAChB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI;AAAY,WAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B,KAAK;AAAA,QACL,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/react-desc-prop-types.tsx", "
|
|
3
|
+
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is readOnly or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AACvE,oBAAuB;AAiEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,kCAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,kCAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,eAAe,MAAM;AAAA,EACzG;AAAA,EACF,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,kCAAU,MAAM,OAAO,OAAO,oBAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/styles.tsx", "
|
|
3
|
+
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n margin: 2px 0px -2px 8px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: ${theme.space.xxs}`};\n\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n font-size: 13px;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/utils/styleHelpers.tsx", "
|
|
3
|
+
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,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;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { useCheckBox } from './config/useCheckBox.js';\nimport { ControlledCheckBoxContext } from './ControlledCheckboxCTX.js';\nimport { ControlledCheckBoxContent } from './parts/ControlledCheckBoxContent.js';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const ctx = useCheckBox(props);\n return (\n <ControlledCheckBoxContext.Provider value={ctx}>\n <ControlledCheckBoxContent />\n </ControlledCheckBoxContext.Provider>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACcjB;AAXN,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC,8BAAC,6BAA0B,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckboxCTX.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { ControlledCheckboxCTX } from './config/useCheckBox.js';\n\nconst defaultContext = {} as ControlledCheckboxCTX;\n\n/** Context for cross component communication */\nexport const ControlledCheckBoxContext = createContext<ControlledCheckboxCTX>(defaultContext);\n\nexport default ControlledCheckBoxContext;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,4BAA4B,cAAqC,cAAc;AAE5F,IAAO,gCAAQ;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCheckBox.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\nimport { propTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useEventHandlers } from './useEventHandlers.js';\n\nexport interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {\n propsWithDefault: DSControlledCheckboxT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useCheckBox = (props: DSControlledCheckboxT.Props): ControlledCheckboxCTX => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledCheckboxT.InternalProps>(props, defaultProps);\n useValidateProps(props, propTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledCheckboxT.InternalProps>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { id } = globalProps;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const eventHandlers = useEventHandlers(propsWithDefault);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n ...eventHandlers,\n }),\n [eventHandlers, globalProps, instanceUid, propsWithDefault, xstyledProps],\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AAEpB,SAAS,WAAW,oBAAoB;AACxC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAS1B,MAAM,cAAc,CAAC,UAA8D;AAIxF,QAAM,mBAAmB,6BAAkE,OAAO,YAAY;AAC9G,mBAAiB,OAAO,SAAS;AAIjC,QAAM,cAAc,uBAA4D,gBAAgB;AAChG,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAK1D,QAAM,gBAAgB,iBAAiB,gBAAgB;AAEvD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa,aAAa,kBAAkB,YAAY;AAAA,EAC1E;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useEventHandlers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useEventHandlers = (props: DSControlledCheckboxT.InternalProps) => {\n const { checked, onChange, onKeyDown, readOnly } = props;\n const handleOnChange = React.useCallback(\n (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => {\n if (onChange && !readOnly) {\n if (checked === 'mixed') onChange(true, e);\n if (checked === true) onChange(false, e);\n if (checked === false) onChange(true, e);\n }\n },\n [checked, onChange, readOnly],\n );\n const handleMixedCheckboxOnKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (onKeyDown) {\n // if user provides 'onKeyDown' event, he is in charge of what happens\n onKeyDown(e);\n }\n if ((e.code === 'Space' || e.code === 'Enter') && !readOnly) {\n handleOnChange(e);\n e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\n }\n },\n [handleOnChange, onKeyDown, readOnly],\n );\n\n return React.useMemo(\n () => ({\n handleOnChange,\n handleMixedCheckboxOnKeyDown,\n }),\n [handleMixedCheckboxOnKeyDown, handleOnChange],\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGX,MAAM,mBAAmB,CAAC,UAA+C;AAC9E,QAAM,EAAE,SAAS,UAAU,WAAW,SAAS,IAAI;AACnD,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CACE,MAKG;AACH,UAAI,YAAY,CAAC,UAAU;AACzB,YAAI,YAAY;AAAS,mBAAS,MAAM,CAAC;AACzC,YAAI,YAAY;AAAM,mBAAS,OAAO,CAAC;AACvC,YAAI,YAAY;AAAO,mBAAS,MAAM,CAAC;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,SAAS,UAAU,QAAQ;AAAA,EAC9B;AACA,QAAM,+BAA+BA,OAAM;AAAA,IACzC,CAAC,MAA2C;AAC1C,UAAI,WAAW;AAEb,kBAAU,CAAC;AAAA,MACb;AACA,WAAK,EAAE,SAAS,WAAW,EAAE,SAAS,YAAY,CAAC,UAAU;AAC3D,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,WAAW,QAAQ;AAAA,EACtC;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,cAAc;AAAA,EAC/C;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../exported-related/index.js';\nimport type { WeakValidationMap } from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAC/C,SAAS,sBAAsB;AAIxB,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/device.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DEVICE = {\n MOBILE: 'mobile',\n DESKTOP: 'desktop',\n} as const;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,EACR,SAAS;AACX;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxDataTestIds = {\n CONTAINER: 'ds-checkbox-container',\n INPUT: 'ds-checkbox',\n} as const;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids.js';\nexport * from './theming.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\n\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport const DSControlledCheckbox = ({ ...props }) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }) => <Checkbox {...props} visualOnly />;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACK+B;AALtD,SAAS,wBAAwB,gBAAgB;AAEjD,cAAc;AAEd,SAAS,sCAAsC;AACxC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAM,oBAAC,YAAU,GAAG,OAAO;AACpE,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAM,oBAAC,YAAU,GAAG,OAAO,YAAU,MAAC;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledCheckBoxContent.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n React.useContext(ControlledCheckBoxContext);\n const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n return (\n <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n <MainInput />\n </StyledCheckBox>\n {label && (\n <StyledLabel\n id={`${instanceUid}_label`}\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACanB,SAEI,KAFJ;AAbJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,sBAAsB;AAC9E,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,SACE,qBAAC,mBAAgB,QAAgB,eAAY,yBAAwB,WAAuB,GAAG,cAC7F;AAAA,wBAAC,kBAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,8BAAC,aAAU,GACb;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,QAEvF,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainInput.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n React.useContext(ControlledCheckBoxContext);\n const {\n disabled,\n readOnly,\n // label,\n tabIndex,\n innerRef,\n checked,\n visualOnly,\n ariaControls: camelCaseAriaControls,\n // ariaLabel: camelCaseAriaLabel,\n // externalLabel,\n } = propsWithDefault;\n const { 'aria-controls': ariaControls } = globalProps;\n\n // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n // so\n // if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n // if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n // props slightly differ because of this\n // also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n const canShowMixedState = ariaControls || camelCaseAriaControls;\n\n const mainInputProps = {\n id: instanceUid,\n 'data-testid': 'ds-checkbox',\n 'aria-labelledby': `${instanceUid}_label ${instanceUid}_block_label`,\n 'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n ...globalProps, // any props provided by the user will over-ride ours\n };\n\n if (visualOnly) return null;\n\n if (canShowMixedState)\n return (\n <StyledInputMixed\n {...mainInputProps}\n role=\"checkbox\"\n aria-controls={ariaControls || camelCaseAriaControls}\n aria-disabled={disabled}\n onClick={!disabled && !readOnly ? handleOnChange : undefined}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n tabIndex={disabled ? -1 : tabIndex}\n ref={innerRef}\n onMouseDown={(e: React.MouseEvent) => {\n if (disabled) e.preventDefault();\n }}\n />\n );\n return (\n <StyledInput\n {...mainInputProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={handleOnChange}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n disabled={disabled}\n tabIndex={tabIndex}\n ref={innerRef}\n />\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACyCjB;AAzCN,OAAOA,YAAW;AAClB,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA;AAAA;AAAA,EAGhB,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB,GAAG,qBAAqB;AAAA,IAC3C,gBAAgB;AAAA;AAAA,IAChB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI;AAAY,WAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B,KAAK;AAAA,QACL,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is readOnly or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,cAAc;AAiEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,UAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,UAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,eAAe,MAAM;AAAA,EACzG;AAAA,EACF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n margin: 2px 0px -2px 8px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: ${theme.space.xxs}`};\n\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n font-size: 13px;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
4
|
"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"],
|
|
5
5
|
"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;",
|
|
6
6
|
"names": []
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-checkbox",
|
|
3
|
-
"version": "3.22.0-
|
|
3
|
+
"version": "3.22.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"uid": "~2.0.1",
|
|
39
|
-
"@elliemae/ds-props-helpers": "3.22.0-
|
|
40
|
-
"@elliemae/ds-system": "3.22.0-
|
|
41
|
-
"@elliemae/ds-truncated-tooltip-text": "3.22.0-
|
|
42
|
-
"@elliemae/ds-utilities": "3.22.0-
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.22.0-rc.1",
|
|
40
|
+
"@elliemae/ds-system": "3.22.0-rc.1",
|
|
41
|
+
"@elliemae/ds-truncated-tooltip-text": "3.22.0-rc.1",
|
|
42
|
+
"@elliemae/ds-utilities": "3.22.0-rc.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@elliemae/pui-cli": "~9.0.0-next.
|
|
45
|
+
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
46
46
|
"@elliemae/pui-theme": "~2.7.0",
|
|
47
47
|
"@testing-library/dom": "~8.19.0",
|
|
48
48
|
"@testing-library/jest-dom": "~5.16.5",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@testing-library/user-event": "~13.5.0",
|
|
51
51
|
"jest-axe": "^7.0.1",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-rc.1"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@elliemae/pui-theme": "~2.7.0",
|
|
@@ -64,15 +64,15 @@
|
|
|
64
64
|
"typeSafety": false
|
|
65
65
|
},
|
|
66
66
|
"scripts": {
|
|
67
|
-
"dev": "cross-env NODE_ENV=development node
|
|
67
|
+
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
68
68
|
"test": "pui-cli test --passWithNoTests",
|
|
69
|
-
"lint": "node
|
|
70
|
-
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='
|
|
71
|
-
"dts": "node
|
|
69
|
+
"lint": "node ../../../scripts/lint.mjs",
|
|
70
|
+
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
|
|
71
|
+
"dts": "node ../../../scripts/dts.mjs",
|
|
72
72
|
"dts:withdeps": "pnpm --filter {.}... dts",
|
|
73
|
-
"build": "cross-env NODE_ENV=production node
|
|
73
|
+
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
74
74
|
"dev:build": "pnpm --filter {.}... build",
|
|
75
75
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
76
|
-
"checkDeps": "npm exec
|
|
76
|
+
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
77
77
|
}
|
|
78
78
|
}
|