@elliemae/ds-form-toggle 3.27.0-next.3 → 3.27.0-next.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/ControlledToggle.js +2 -2
- package/dist/cjs/ControlledToggle.js.map +2 -2
- package/dist/cjs/styles.js +1 -1
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/ControlledToggle.js +3 -3
- package/dist/esm/ControlledToggle.js.map +2 -2
- package/dist/esm/styles.js +1 -1
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/styles.d.ts +1 -2
- package/package.json +7 -7
|
@@ -67,12 +67,12 @@ const DSControlledToggle = (props) => {
|
|
|
67
67
|
}),
|
|
68
68
|
[checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value]
|
|
69
69
|
);
|
|
70
|
-
(0, import_react.
|
|
70
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
71
71
|
if (labelTextRef.current) {
|
|
72
72
|
setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
|
|
73
73
|
}
|
|
74
74
|
}, [labelTextRef, longerText, checked]);
|
|
75
|
-
(0, import_react.
|
|
75
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
76
76
|
if (widthTextRef.current) {
|
|
77
77
|
setWidth(widthTextRef.current.clientWidth);
|
|
78
78
|
}
|
|
@@ -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,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAtEZ,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } 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: DSButtonV2T.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 DSButtonV2T.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnChange,\n }),\n [checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value],\n );\n\n useLayoutEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useLayoutEffect(() => {\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 innerRef={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} innerRef={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
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAtEZ,mBAAkE;AAElE,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,kBAAiC;AAAA,IACrC,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,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,oCAAgB,MAAM;AACpB,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,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,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": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -85,7 +85,7 @@ const StyledContainer = (0, import_ds_system.styled)("div")`
|
|
|
85
85
|
${import_ds_system.xStyledCommonProps}
|
|
86
86
|
`;
|
|
87
87
|
const StyledLabel = (0, import_ds_system.styled)("div")`
|
|
88
|
-
width: ${({ width, size }) => `calc(${width}px + ${import_styleHelpers.margin[size]})`};
|
|
88
|
+
width: ${({ width, size }) => width ? `calc(${width}px + ${import_styleHelpers.margin[size]})` : "auto"};
|
|
89
89
|
height: ${({ size }) => import_styleHelpers.labelHeight[size]};
|
|
90
90
|
z-index: 2;
|
|
91
91
|
outline: none;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\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<{ checked: boolean }>`\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 }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\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)`\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useMemo, useRef,
|
|
3
|
+
import { useState, useMemo, useRef, useLayoutEffect } from "react";
|
|
4
4
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { DSControlledTogglePropTypesSchema } from "./react-desc-prop-types.js";
|
|
6
6
|
import {
|
|
@@ -41,12 +41,12 @@ const DSControlledToggle = (props) => {
|
|
|
41
41
|
}),
|
|
42
42
|
[checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value]
|
|
43
43
|
);
|
|
44
|
-
|
|
44
|
+
useLayoutEffect(() => {
|
|
45
45
|
if (labelTextRef.current) {
|
|
46
46
|
setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
|
|
47
47
|
}
|
|
48
48
|
}, [labelTextRef, longerText, checked]);
|
|
49
|
-
|
|
49
|
+
useLayoutEffect(() => {
|
|
50
50
|
if (widthTextRef.current) {
|
|
51
51
|
setWidth(widthTextRef.current.clientWidth);
|
|
52
52
|
}
|
|
@@ -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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsEX,SACE,KADF;AAtEZ,SAAgB,UAAU,SAAS,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } 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: DSButtonV2T.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 DSButtonV2T.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnChange,\n }),\n [checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value],\n );\n\n useLayoutEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useLayoutEffect(() => {\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 innerRef={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} innerRef={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
|
+
"mappings": "AAAA,YAAY,WAAW;ACsEX,SACE,KADF;AAtEZ,SAAgB,UAAU,SAAS,QAAQ,uBAAuB;AAElE,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,cAAiC;AAAA,IACrC,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,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,kBAAgB,MAAM;AACpB,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,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,oBAAC,iBAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,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": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -56,7 +56,7 @@ const StyledContainer = styled("div")`
|
|
|
56
56
|
${xStyledCommonProps}
|
|
57
57
|
`;
|
|
58
58
|
const StyledLabel = styled("div")`
|
|
59
|
-
width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};
|
|
59
|
+
width: ${({ width, size }) => width ? `calc(${width}px + ${margin[size]})` : "auto"};
|
|
60
60
|
height: ${({ size }) => labelHeight[size]};
|
|
61
61
|
z-index: 2;
|
|
62
62
|
outline: none;
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\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<{ checked: boolean }>`\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 }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\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)`\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { DSButtonT } from '@elliemae/ds-button-v2';
|
|
3
2
|
import type { DSControlledToggleT } from './react-desc-prop-types.js';
|
|
4
3
|
interface StyledContainerT {
|
|
5
4
|
size: DSControlledToggleT.ToggleSize;
|
|
@@ -38,6 +37,6 @@ export declare const StyledLabel: import("styled-components").StyledComponent<"d
|
|
|
38
37
|
export declare const StyledVisibleContent: import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Partial<StyledVisibleContentT>>;
|
|
39
38
|
export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCircleT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
40
39
|
export declare const StyledText: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTextT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
41
|
-
export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme,
|
|
40
|
+
export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
42
41
|
export declare const SetLabelWidth: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, SetLabelWidthT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
43
42
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -38,17 +38,17 @@
|
|
|
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.27.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-tooltip": "3.27.0-next.
|
|
45
|
-
"@elliemae/ds-utilities": "3.27.0-next.
|
|
41
|
+
"@elliemae/ds-button-v2": "3.27.0-next.4",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.4",
|
|
43
|
+
"@elliemae/ds-system": "3.27.0-next.4",
|
|
44
|
+
"@elliemae/ds-tooltip": "3.27.0-next.4",
|
|
45
|
+
"@elliemae/ds-utilities": "3.27.0-next.4"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
49
49
|
"@elliemae/pui-theme": "~2.7.0",
|
|
50
50
|
"styled-components": "~5.3.9",
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.27.0-next.
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.4"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@elliemae/pui-theme": "~2.7.0",
|