@elliemae/ds-form-toggle 3.21.0-rc.2 → 3.21.2-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ControlledToggle.js +11 -8
- package/dist/cjs/ControlledToggle.js.map +2 -2
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/cjs/styles.js +2 -2
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/ControlledToggle.js +11 -8
- package/dist/esm/ControlledToggle.js.map +2 -2
- package/dist/esm/propTypes.js.map +1 -1
- package/dist/esm/styles.js +1 -1
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/ControlledToggle.d.ts +0 -1
- package/dist/types/propTypes.d.ts +2 -1
- package/dist/types/styles.d.ts +2 -1
- package/dist/types/utils/addTooltipOnReadOnly.d.ts +0 -1
- package/package.json +5 -5
|
@@ -61,13 +61,16 @@ const DSControlledToggle = (props) => {
|
|
|
61
61
|
setWidth(widthTextRef.current.clientWidth);
|
|
62
62
|
}
|
|
63
63
|
}, [widthTextRef]);
|
|
64
|
-
const handleOnChange = (0, import_react.useCallback)(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
onChange
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
const handleOnChange = (0, import_react.useCallback)(
|
|
65
|
+
(e) => {
|
|
66
|
+
if (disabled || readOnly)
|
|
67
|
+
return;
|
|
68
|
+
if (onChange) {
|
|
69
|
+
onChange(e);
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
[disabled, readOnly, onChange]
|
|
73
|
+
);
|
|
71
74
|
const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
|
|
72
75
|
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
|
|
73
76
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -83,11 +86,11 @@ const DSControlledToggle = (props) => {
|
|
|
83
86
|
import_styles.StyledButton,
|
|
84
87
|
{
|
|
85
88
|
role: "switch",
|
|
89
|
+
"data-testid": "ds-controlled-toggle-checkbox",
|
|
86
90
|
...globalAttrs,
|
|
87
91
|
value,
|
|
88
92
|
type: "button",
|
|
89
93
|
buttonType: "raw",
|
|
90
|
-
"data-testid": "ds-controlled-toggle-checkbox",
|
|
91
94
|
id: instanceUID,
|
|
92
95
|
"aria-readonly": readOnly,
|
|
93
96
|
"aria-disabled": disabled,
|
|
@@ -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-props-helpers';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuFX;AAvFZ,mBAAyE;AACzE,iBAAoB;AACpB,8BAMO;
|
|
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-props-helpers';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes, DSFormToggleName);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, 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 (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 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 <StyledButton\n role=\"switch\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n {...globalAttrs}\n value={value}\n type=\"button\"\n buttonType=\"raw\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n >\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 readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = DSFormToggleName;\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;ADuFX;AAvFZ,mBAAyE;AACzE,iBAAoB;AACpB,8BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AACrC,qCAAiC;AAEjC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,wBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,8DAA+B,mBAAmB,4BAAW,+CAAgB;AAC7E,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,UAAU,gBAAgB,IAAI,GAAG,KAAK,IACzG;AAEF,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,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,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,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;AAEA,QAAM,kBAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,IAAI;AAAA,YACJ,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,6BAAY,SAAkB,MAAY,OACzC,uDAAC,sCAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,4DAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,gBACpF;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAEC,oBAAU,UAAU;AAAA;AAAA,gBACvB;AAAA,iBACF,GACF;AAAA,cACA,4CAAC,+BAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: () => void
|
|
4
|
+
"sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n }\n}\nexport const defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onClick: () => null,\n size: 'm',\n readonly: false,\n disabled: false,\n};\n\nexport const propTypes = {\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 active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AAkBhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,kCAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,kCAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,kCAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,kCAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,kCAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -39,7 +39,7 @@ __export(styles_exports, {
|
|
|
39
39
|
module.exports = __toCommonJS(styles_exports);
|
|
40
40
|
var React = __toESM(require("react"));
|
|
41
41
|
var import_ds_system = require("@elliemae/ds-system");
|
|
42
|
-
var
|
|
42
|
+
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
43
43
|
var import_styleHelpers = require("./utils/styleHelpers.js");
|
|
44
44
|
const focusBorders = import_ds_system.css`
|
|
45
45
|
&:focus-within {
|
|
@@ -127,7 +127,7 @@ const StyledText = import_ds_system.styled.div`
|
|
|
127
127
|
${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
|
|
128
128
|
${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
|
|
129
129
|
`;
|
|
130
|
-
const StyledButton = (0, import_ds_system.styled)(
|
|
130
|
+
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
|
|
131
131
|
margin: 0;
|
|
132
132
|
padding: 0;
|
|
133
133
|
z-index: 20;
|
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 { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes.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}\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`;\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './propTypes.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`;\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
|
}
|
|
@@ -41,13 +41,16 @@ const DSControlledToggle = (props) => {
|
|
|
41
41
|
setWidth(widthTextRef.current.clientWidth);
|
|
42
42
|
}
|
|
43
43
|
}, [widthTextRef]);
|
|
44
|
-
const handleOnChange = useCallback(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
onChange
|
|
49
|
-
|
|
50
|
-
|
|
44
|
+
const handleOnChange = useCallback(
|
|
45
|
+
(e) => {
|
|
46
|
+
if (disabled || readOnly)
|
|
47
|
+
return;
|
|
48
|
+
if (onChange) {
|
|
49
|
+
onChange(e);
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
[disabled, readOnly, onChange]
|
|
53
|
+
);
|
|
51
54
|
const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });
|
|
52
55
|
const xStyledProps = useGetXstyledProps(rest);
|
|
53
56
|
return /* @__PURE__ */ jsx(
|
|
@@ -63,11 +66,11 @@ const DSControlledToggle = (props) => {
|
|
|
63
66
|
StyledButton,
|
|
64
67
|
{
|
|
65
68
|
role: "switch",
|
|
69
|
+
"data-testid": "ds-controlled-toggle-checkbox",
|
|
66
70
|
...globalAttrs,
|
|
67
71
|
value,
|
|
68
72
|
type: "button",
|
|
69
73
|
buttonType: "raw",
|
|
70
|
-
"data-testid": "ds-controlled-toggle-checkbox",
|
|
71
74
|
id: instanceUID,
|
|
72
75
|
"aria-readonly": readOnly,
|
|
73
76
|
"aria-disabled": disabled,
|
|
@@ -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-props-helpers';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuFX,SACE,KADF;AAvFZ,SAAgB,UAAU,SAAS,QAAQ,WAAW,mBAAmB;AACzE,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
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-props-helpers';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes, DSFormToggleName);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, 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 (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 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 <StyledButton\n role=\"switch\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n {...globalAttrs}\n value={value}\n type=\"button\"\n buttonType=\"raw\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n >\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 readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuFX,SACE,KADF;AAvFZ,SAAgB,UAAU,SAAS,QAAQ,WAAW,mBAAmB;AACzE,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,oBAA8C;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAEjC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,WAAW,gBAAgB;AAC7E,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,UAAU,gBAAgB,IAAI,GAAG,KAAK,IACzG;AAEF,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,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;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;AAEA,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,IAAI;AAAA,YACJ,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,eAAY,SAAkB,MAAY,OACzC,+BAAC,wBAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,oCAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,gBACpF;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAEC,oBAAU,UAAU;AAAA;AAAA,gBACvB;AAAA,iBACF,GACF;AAAA,cACA,oBAAC,iBAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: () => void
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n }\n}\nexport const defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onClick: () => null,\n size: 'm',\n readonly: false,\n disabled: false,\n};\n\nexport const propTypes = {\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 active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\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"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,kBAAkB,iBAAiB;AAkBhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,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,QAAQ,UAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
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 { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes.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}\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`;\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": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
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 './propTypes.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`;\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
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare namespace DSControlledToggleT {
|
|
2
3
|
type ToggleSize = 's' | 'm' | 'l';
|
|
3
4
|
interface Props {
|
|
@@ -6,7 +7,7 @@ export declare namespace DSControlledToggleT {
|
|
|
6
7
|
name: string;
|
|
7
8
|
value: string;
|
|
8
9
|
checked: boolean;
|
|
9
|
-
onChange: () => void
|
|
10
|
+
onChange: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
10
11
|
size: ToggleSize;
|
|
11
12
|
readOnly: boolean;
|
|
12
13
|
disabled: boolean;
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import type { DSControlledToggleT } from './propTypes.js';
|
|
3
3
|
interface StyledContainerT {
|
|
4
4
|
size: DSControlledToggleT.ToggleSize;
|
|
5
|
+
disabled: boolean;
|
|
5
6
|
}
|
|
6
7
|
interface StyledLabelT {
|
|
7
8
|
width: number;
|
|
@@ -36,6 +37,6 @@ export declare const StyledLabel: import("styled-components").StyledComponent<"d
|
|
|
36
37
|
export declare const StyledVisibleContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledVisibleContentT & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
37
38
|
export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCircleT & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
38
39
|
export declare const StyledText: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTextT & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
39
|
-
export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
40
|
+
export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
40
41
|
export declare const SetLabelWidth: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, SetLabelWidthT & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
41
42
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
|
3
|
-
"version": "3.21.
|
|
3
|
+
"version": "3.21.2-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"styled-components": "~5.3.9",
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-button": "3.21.
|
|
41
|
-
"@elliemae/ds-props-helpers": "3.21.
|
|
42
|
-
"@elliemae/ds-system": "3.21.
|
|
43
|
-
"@elliemae/ds-tooltip": "3.21.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.21.2-rc.1",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.21.2-rc.1",
|
|
42
|
+
"@elliemae/ds-system": "3.21.2-rc.1",
|
|
43
|
+
"@elliemae/ds-tooltip": "3.21.2-rc.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.7.0",
|