@elliemae/ds-form-toggle 3.22.0-next.25 → 3.22.0-next.30

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.
Files changed (21) hide show
  1. package/dist/cjs/ControlledToggle.js.map +1 -1
  2. package/dist/cjs/DSFormToggleDefinitions.js.map +1 -1
  3. package/dist/cjs/config/useDSControlledToggle.js.map +1 -1
  4. package/dist/cjs/config/useValidateProps.js.map +1 -1
  5. package/dist/cjs/constants/index.js.map +1 -1
  6. package/dist/cjs/index.js.map +1 -1
  7. package/dist/cjs/parts/AddTooltipOnReadOnly.js.map +1 -1
  8. package/dist/cjs/react-desc-prop-types.js.map +1 -1
  9. package/dist/cjs/styles.js.map +1 -1
  10. package/dist/cjs/utils/styleHelpers.js.map +1 -1
  11. package/dist/esm/ControlledToggle.js.map +1 -1
  12. package/dist/esm/DSFormToggleDefinitions.js.map +1 -1
  13. package/dist/esm/config/useDSControlledToggle.js.map +1 -1
  14. package/dist/esm/config/useValidateProps.js.map +1 -1
  15. package/dist/esm/constants/index.js.map +1 -1
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/esm/parts/AddTooltipOnReadOnly.js.map +1 -1
  18. package/dist/esm/react-desc-prop-types.js.map +1 -1
  19. package/dist/esm/styles.js.map +1 -1
  20. package/dist/esm/utils/styleHelpers.js.map +1 -1
  21. package/package.json +13 -13
package/dist/cjs/ControlledToggle.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/ControlledToggle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/ControlledToggle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useState, useMemo, useRef, useEffect } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const ButtonProps: DSButtonT.Props = useMemo(\n () => ({\n role: 'switch',\n 'data-testid': 'ds-controlled-toggle-checkbox',\n value: value,\n id: instanceUid,\n 'aria-readonly': readOnly,\n 'aria-disabled': disabled,\n 'aria-checked': checked,\n readOnly: readOnly,\n disabled: disabled,\n ...(globalProps as unknown as DSButtonT.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnChange,\n }),\n [checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value],\n );\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xstyledProps}\n disabled={disabled}\n >\n <AddTooltipOnReadOnly readOnly={readOnly}>\n <StyledButton {...ButtonProps}>\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} disabled={disabled}>\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n ref={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} ref={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>\n </AddTooltipOnReadOnly>\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = DSControlledTogglePropTypesSchema;\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAtEZ,mBAA4D;AAE5D,8BAAyB;AACzB,mCAA4E;AAC5E,oBAQO;AACP,qCAAiC;AACjC,mCAAsC;AACtC,kCAAqC;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,eAAe,QAAI,oDAAsB,KAAK;AAChH,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,SAAS,IAAI;AAExF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAA+B;AAAA,IACnC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA,MACf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,gBAAgB,aAAa,UAAU,KAAK;AAAA,EAC/E;AAEA,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,sDAAC,oDAAqB,UACpB,uDAAC,8BAAc,GAAG,aAChB;AAAA,oDAAC,6BAAY,SAAkB,MAAY,OACzC,uDAAC,sCAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,sDAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,UACpF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
6
6
  "names": []
package/dist/cjs/DSFormToggleDefinitions.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/DSFormToggleDefinitions.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/DSFormToggleDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["export const DSFormToggleName = 'DSFormToggle';\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;",
6
6
  "names": []
package/dist/cjs/config/useDSControlledToggle.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/config/useDSControlledToggle.ts", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/config/useDSControlledToggle.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, readOnly, onChange } = propsWithDefault;\n const handleOnChange = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(\n useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, { onClick: handleOnChange }),\n );\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnChange,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,kDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AACzC,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAgG;AAC/F,UAAI,YAAY;AAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAIA,QAAM,kBAAc;AAAA,QAClB,4CAA0D,kBAAkB,EAAE,SAAS,eAAe,CAAC;AAAA,EACzG;AACA,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,cAAc;AAAA,EAC3E;AACF;",
6
6
  "names": ["React"]
package/dist/cjs/config/useValidateProps.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/config/useValidateProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (\n props: DSControlledToggleT.InternalProps,\n propTypes: WeakValidationMap<unknown>,\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,uBAAuC;AAEhC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,0DAA+B,OAAO,WAAW,uCAAsB;AACzE;",
6
6
  "names": []
package/dist/cjs/constants/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/constants/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/constants/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSControlledToggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n CONTROLLED_CONTAINER: 'container',\n TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n CONTROLLED_CONTAINER: 'ds-controlled-toggle',\n TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,OAAG,0CAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;",
6
6
  "names": []
package/dist/cjs/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["export * from './ControlledToggle.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,kCAAd;",
6
6
  "names": []
package/dist/cjs/parts/AddTooltipOnReadOnly.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/parts/AddTooltipOnReadOnly.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/parts/AddTooltipOnReadOnly.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({\n readOnly,\n children,\n}: {\n readOnly: boolean;\n children: React.ReactNode;\n}): JSX.Element => {\n if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n return <>{children}</>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUA;AATvB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAGmB;AACjB,MAAI;AAAU,WAAO,4CAAC,iCAAY,MAAK,aAAa,UAAS;AAC7D,SAAO,2EAAG,UAAS;AACrB;",
6
6
  "names": []
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n\n export interface OptionalProps {\n containerProps: Record<string, unknown>;\n id: string;\n }\n\n export interface DefaultProps {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onChange: () => null,\n size: 'm',\n readOnly: false,\n disabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked'),\n labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n value: PropTypes.string.description('Value attribute for toggle'),\n name: PropTypes.string.description('Name attribute for toggle'),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onChange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as WeakValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AAmChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,8BAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,8BAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,8BAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
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", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['700'];\n }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n z-index: 0;\n border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n &:hover {\n cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)<DSButtonT.Props>`\n margin: 0;\n padding: 0;\n z-index: 20;\n border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAEhD,0BAA2B;AAE3B,0BAUO;AAmCP,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQK,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,SAAS,MAAM,MAAM;AAC1C,MAAI;AAAS,WAAO,MAAM,OAAO,MAAM,KAAK;AAAA;AACvC,WAAO,MAAM,OAAO,QAAQ,KAAK;AACxC;AAAA;AAAA,kBAEgB,CAAC,EAAE,SAAS,MAAM,MAAM;AACtC,MAAI;AAAS,WAAO,MAAM,OAAO,MAAM,KAAK;AAAA;AACvC,WAAO,MAAM,OAAO,QAAQ,KAAK;AACxC;AAAA;AAGK,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAC,EAAE,KAAK,MAAM,oCAAgB,IAAI;AAAA,mBAC3B,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9C,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY;AAAA,IAC/B;AAAA;AAGG,MAAM,kBAAc,yBAAO,KAAK;AAAA,WAC5B,CAAC,EAAE,OAAO,KAAK,MAAM,QAAQ,aAAa,2BAAO,IAAI;AAAA,YACpD,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI;AAAA;AAAA;AAAA,mBAGvB,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI;AAAA;AAG1C,MAAM,2BAAuB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAM5B,CAAC,EAAE,QAAQ,MAAO,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,KAAK,MAAM,QAAQ,gCAAY,IAAI;AAAA,YAC7C,CAAC,UACT,MAAM,SAAS,MACX,iBAAa,+DAA0C,KAAK,MAC5D;AAAA,oBACQ,+DAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA,cAER,CAAC,EAAE,UAAU,SAAS,UAAM,mCAAc,UAAU,QAAQ;AAAA,MACpE,CAAC,EAAE,UAAU,SAAS,MAAM,CAAC,YAAY,CAAC,YAAY;AAAA;AAAA;AAIrD,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA,WAChC,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA;AAAA,sBAEpB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG1G,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA,iBAGhB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA;AAAA,qBAE3C,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,YAAY,MAAM,OAAO,QAAQ,KAAK;AAAA,IAClF,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,mBAAe,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
package/dist/cjs/utils/styleHelpers.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\nconst bgColorsMap = {\n disabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
6
6
  "names": []
package/dist/esm/ControlledToggle.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const ButtonProps: DSButtonT.Props = useMemo(\n () => ({\n role: 'switch',\n 'data-testid': 'ds-controlled-toggle-checkbox',\n value: value,\n id: instanceUid,\n 'aria-readonly': readOnly,\n 'aria-disabled': disabled,\n 'aria-checked': checked,\n readOnly: readOnly,\n disabled: disabled,\n ...(globalProps as unknown as DSButtonT.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnChange,\n }),\n [checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value],\n );\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xstyledProps}\n disabled={disabled}\n >\n <AddTooltipOnReadOnly readOnly={readOnly}>\n <StyledButton {...ButtonProps}>\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} disabled={disabled}>\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n ref={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} ref={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>\n </AddTooltipOnReadOnly>\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = DSControlledTogglePropTypesSchema;\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACsEX,SACE,KADF;AAtEZ,SAAgB,UAAU,SAAS,QAAQ,iBAAiB;AAE5D,SAAS,gBAAgB;AACzB,SAAS,yCAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,eAAe,IAAI,sBAAsB,KAAK;AAChH,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,SAAS,IAAI;AAExF,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAA+B;AAAA,IACnC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA,MACf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,gBAAgB,aAAa,UAAU,KAAK;AAAA,EAC/E;AAEA,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,8BAAC,wBAAqB,UACpB,+BAAC,gBAAc,GAAG,aAChB;AAAA,4BAAC,eAAY,SAAkB,MAAY,OACzC,+BAAC,wBAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,8BAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,UACpF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,oBAAC,iBAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
6
6
  "names": []
package/dist/esm/DSFormToggleDefinitions.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSFormToggleDefinitions.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFormToggleDefinitions.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSFormToggleName = 'DSFormToggle';\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,mBAAmB;",
6
6
  "names": []
package/dist/esm/config/useDSControlledToggle.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSControlledToggle.ts"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSControlledToggle.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, readOnly, onChange } = propsWithDefault;\n const handleOnChange = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(\n useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, { onClick: handleOnChange }),\n );\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnChange,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange],\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AACzC,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAgG;AAC/F,UAAI,YAAY;AAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAIA,QAAM,cAAc;AAAA,IAClB,uBAA0D,kBAAkB,EAAE,SAAS,eAAe,CAAC;AAAA,EACzG;AACA,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,cAAc;AAAA,EAC3E;AACF;",
6
6
  "names": ["React"]
package/dist/esm/config/useValidateProps.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (\n props: DSControlledToggleT.InternalProps,\n propTypes: WeakValidationMap<unknown>,\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,sBAAsB;AACzE;",
6
6
  "names": []
package/dist/esm/constants/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSControlledToggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n CONTROLLED_CONTAINER: 'container',\n TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n CONTROLLED_CONTAINER: 'ds-controlled-toggle',\n TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,GAAG,wBAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;",
6
6
  "names": []
package/dist/esm/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ControlledToggle.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
6
6
  "names": []
package/dist/esm/parts/AddTooltipOnReadOnly.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AddTooltipOnReadOnly.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AddTooltipOnReadOnly.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({\n readOnly,\n children,\n}: {\n readOnly: boolean;\n children: React.ReactNode;\n}): JSX.Element => {\n if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n return <>{children}</>;\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACUA,SACd,UADc;AATvB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAGmB;AACjB,MAAI;AAAU,WAAO,oBAAC,eAAY,MAAK,aAAa,UAAS;AAC7D,SAAO,gCAAG,UAAS;AACrB;",
6
6
  "names": []
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
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 { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n\n export interface OptionalProps {\n containerProps: Record<string, unknown>;\n id: string;\n }\n\n export interface DefaultProps {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onChange: () => null,\n size: 'm',\n readOnly: false,\n disabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked'),\n labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n value: PropTypes.string.description('Value attribute for toggle'),\n name: PropTypes.string.description('Name attribute for toggle'),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onChange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as WeakValidationMap<DSControlledToggleT.Props>;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAmChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
6
6
  "names": []
package/dist/esm/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
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 { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['700'];\n }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n z-index: 0;\n border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n &:hover {\n cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)<DSButtonT.Props>`\n margin: 0;\n padding: 0;\n z-index: 20;\n border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n"],
5
5
  "mappings": "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",
6
6
  "names": []
package/dist/esm/utils/styleHelpers.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\nconst bgColorsMap = {\n disabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,GAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,GAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
6
6
  "names": []
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-toggle",
3
- "version": "3.22.0-next.25",
3
+ "version": "3.22.0-next.30",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Toggle",
6
6
  "files": [
@@ -38,11 +38,11 @@
38
38
  "lodash": "^4.17.21",
39
39
  "styled-components": "~5.3.9",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-button-v2": "3.22.0-next.25",
42
- "@elliemae/ds-props-helpers": "3.22.0-next.25",
43
- "@elliemae/ds-system": "3.22.0-next.25",
44
- "@elliemae/ds-tooltip": "3.22.0-next.25",
45
- "@elliemae/ds-utilities": "3.22.0-next.25"
41
+ "@elliemae/ds-button-v2": "3.22.0-next.30",
42
+ "@elliemae/ds-props-helpers": "3.22.0-next.30",
43
+ "@elliemae/ds-utilities": "3.22.0-next.30",
44
+ "@elliemae/ds-system": "3.22.0-next.30",
45
+ "@elliemae/ds-tooltip": "3.22.0-next.30"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@elliemae/pui-cli": "~9.0.0-next.22",
@@ -53,7 +53,7 @@
53
53
  "@testing-library/user-event": "~13.5.0",
54
54
  "jest-axe": "^7.0.1",
55
55
  "styled-components": "~5.3.9",
56
- "@elliemae/ds-monorepo-devops": "3.22.0-next.25"
56
+ "@elliemae/ds-monorepo-devops": "3.22.0-next.30"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "@elliemae/pui-theme": "~2.7.0",
@@ -67,14 +67,14 @@
67
67
  "typeSafety": false
68
68
  },
69
69
  "scripts": {
70
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
70
+ "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
71
71
  "test": "pui-cli test --passWithNoTests",
72
- "lint": "node ../../scripts/lint.mjs",
73
- "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
74
- "dts": "node ../../scripts/dts.mjs",
75
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
72
+ "lint": "node ../../../scripts/lint.mjs",
73
+ "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
74
+ "dts": "node ../../../scripts/dts.mjs",
75
+ "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
76
76
  "dev:build": "pnpm --filter {.}... build",
77
77
  "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
78
- "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
78
+ "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
79
79
  }
80
80
  }