@elliemae/ds-form-toggle 3.2.0-rc.2 → 3.2.0-rc.3
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.
|
@@ -117,7 +117,7 @@ const DSControlledToggle = (props) => {
|
|
|
117
117
|
active,
|
|
118
118
|
disabled,
|
|
119
119
|
htmlFor: id ? void 0 : instanceUID,
|
|
120
|
-
as: id ? "
|
|
120
|
+
as: id ? "div" : "label"
|
|
121
121
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCircle, {
|
|
122
122
|
checked,
|
|
123
123
|
size,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledToggle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\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 const handleOnChange = useCallback(() => {\n if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <>\n <StyledButton\n role=\"switch\"\n value={value}\n type=\"button\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={disabled ? -1 : 0}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n {...globalAttrs}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n active={active}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,0DAA+B,mBAAmB,0BAAS;AAC3D,QACE,wBADM,WAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OACrG,IAD4G,iBAC5G,IAD4G,CAAtG,WAAS,YAAU,SAAO,WAAS,YAAU,QAAM,YAAU,UAAQ,YAAU,kBAAgB;AAGvG,QAAM,CAAC,uBAAuB,4BAA4B,2BAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,2BAAiB,CAAC;AAC5C,QAAM,eAAe,yBAA8B,IAAI;AACvD,QAAM,eAAe,yBAA8B,IAAI;AAEvD,QAAM,aAAa,0BAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,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,QAAM,iBAAiB,8BAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,4CAAmB,IAAI;AAE5C,SACE,mDAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,KACR,iBACA,eAJL;AAAA,IAKC;AAAA,MAEC,sDACC,wFACE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,KACI,YACN,GACA,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\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 const handleOnChange = useCallback(() => {\n if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <>\n <StyledButton\n role=\"switch\"\n value={value}\n type=\"button\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={disabled ? -1 : 0}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n {...globalAttrs}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n active={active}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? 'div' : 'label'}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n aria-hidden=\"true\"\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}>\n {longerText}\n </SetLabelWidth>\n </>,\n readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,0DAA+B,mBAAmB,0BAAS;AAC3D,QACE,wBADM,WAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OACrG,IAD4G,iBAC5G,IAD4G,CAAtG,WAAS,YAAU,SAAO,WAAS,YAAU,QAAM,YAAU,UAAQ,YAAU,kBAAgB;AAGvG,QAAM,CAAC,uBAAuB,4BAA4B,2BAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,2BAAiB,CAAC;AAC5C,QAAM,eAAe,yBAA8B,IAAI;AACvD,QAAM,eAAe,yBAA8B,IAAI;AAEvD,QAAM,aAAa,0BAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,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,QAAM,iBAAiB,8BAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,4CAAmB,IAAI;AAE5C,SACE,mDAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,KACR,iBACA,eAJL;AAAA,IAKC;AAAA,MAEC,sDACC,wFACE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,KACI,YACN,GACA,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,QAAQ;AAAA,KAEjB,mDAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,mDAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\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 const handleOnChange = useCallback(() => {\n if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <>\n <StyledButton\n role=\"switch\"\n value={value}\n type=\"button\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={disabled ? -1 : 0}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n {...globalAttrs}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n active={active}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,SAAS;AAC3D,QACE,wBADM,WAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OACrG,IAD4G,iBAC5G,IAD4G,CAAtG,WAAS,YAAU,SAAO,WAAS,YAAU,QAAM,YAAU,UAAQ,YAAU,kBAAgB;AAGvG,QAAM,CAAC,uBAAuB,4BAA4B,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,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,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,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,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,KACR,iBACA,eAJL;AAAA,IAKC;AAAA,MAEC,qBACC,4DACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,KACI,YACN,GACA,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\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 const handleOnChange = useCallback(() => {\n if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <>\n <StyledButton\n role=\"switch\"\n value={value}\n type=\"button\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={disabled ? -1 : 0}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n {...globalAttrs}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n active={active}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? 'div' : 'label'}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n aria-hidden=\"true\"\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}>\n {longerText}\n </SetLabelWidth>\n </>,\n readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,SAAS;AAC3D,QACE,wBADM,WAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OACrG,IAD4G,iBAC5G,IAD4G,CAAtG,WAAS,YAAU,SAAO,WAAS,YAAU,QAAM,YAAU,UAAQ,YAAU,kBAAgB;AAGvG,QAAM,CAAC,uBAAuB,4BAA4B,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,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,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,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,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,KACR,iBACA,eAJL;AAAA,IAKC;AAAA,MAEC,qBACC,4DACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,KACI,YACN,GACA,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,QAAQ;AAAA,KAEjB,qCAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,qCAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
|
3
|
-
"version": "3.2.0-rc.
|
|
3
|
+
"version": "3.2.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.2.0-rc.
|
|
39
|
-
"@elliemae/ds-tooltip": "3.2.0-rc.
|
|
40
|
-
"@elliemae/ds-utilities": "3.2.0-rc.
|
|
38
|
+
"@elliemae/ds-system": "3.2.0-rc.3",
|
|
39
|
+
"@elliemae/ds-tooltip": "3.2.0-rc.3",
|
|
40
|
+
"@elliemae/ds-utilities": "3.2.0-rc.3",
|
|
41
41
|
"styled-components": "~5.3.5",
|
|
42
42
|
"uid": "~2.0.0"
|
|
43
43
|
},
|