@elliemae/ds-form-radio 3.2.0 → 3.2.1-rc.2
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/ControlledRadio.js +10 -11
- package/dist/cjs/ControlledRadio.js.map +2 -2
- package/dist/cjs/config/useValidateProps.js +1 -0
- package/dist/cjs/config/useValidateProps.js.map +1 -1
- package/dist/cjs/exported-related/data-test-ids.js +1 -0
- package/dist/cjs/exported-related/data-test-ids.js.map +1 -1
- package/dist/cjs/exported-related/index.js +1 -0
- package/dist/cjs/exported-related/index.js.map +1 -1
- package/dist/cjs/exported-related/theming.js +1 -0
- package/dist/cjs/exported-related/theming.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styles.js +1 -0
- package/dist/cjs/styles.js.map +1 -1
- package/dist/cjs/utils/styleHelpers.js +1 -0
- package/dist/cjs/utils/styleHelpers.js.map +1 -1
- package/dist/esm/ControlledRadio.js +11 -12
- package/dist/esm/ControlledRadio.js.map +2 -2
- package/dist/esm/config/useValidateProps.js +1 -0
- package/dist/esm/config/useValidateProps.js.map +1 -1
- package/dist/esm/exported-related/data-test-ids.js +1 -0
- package/dist/esm/exported-related/data-test-ids.js.map +1 -1
- package/dist/esm/exported-related/index.js +1 -0
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/theming.js +1 -0
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styles.js +1 -0
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/utils/styleHelpers.js +1 -0
- package/dist/esm/utils/styleHelpers.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __defProps = Object.defineProperties;
|
|
@@ -56,6 +57,7 @@ module.exports = __toCommonJS(ControlledRadio_exports);
|
|
|
56
57
|
var React = __toESM(require("react"));
|
|
57
58
|
var import_react = __toESM(require("react"));
|
|
58
59
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
60
|
+
var import_uid = require("uid");
|
|
59
61
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
60
62
|
var import_styles = require("./styles");
|
|
61
63
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
@@ -65,13 +67,10 @@ const DSControlledRadio = (props) => {
|
|
|
65
67
|
(0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.propTypes);
|
|
66
68
|
const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;
|
|
67
69
|
const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), { id, disabled, readOnly, label, className, tabIndex } = _a, restGlobals = __objRest(_a, ["id", "disabled", "readOnly", "label", "className", "tabIndex"]);
|
|
70
|
+
const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
|
|
68
71
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
69
72
|
const handleOnChange = (0, import_react.useCallback)((e) => {
|
|
70
|
-
if (onChange)
|
|
71
|
-
onChange(value, e);
|
|
72
|
-
}, [onChange, value]);
|
|
73
|
-
const handleOnLabelClick = (0, import_react.useCallback)((e) => {
|
|
74
|
-
if (onChange)
|
|
73
|
+
if (onChange && value)
|
|
75
74
|
onChange(value, e);
|
|
76
75
|
}, [onChange, value]);
|
|
77
76
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, __spreadValues({
|
|
@@ -83,22 +82,22 @@ const DSControlledRadio = (props) => {
|
|
|
83
82
|
disabled,
|
|
84
83
|
readOnly
|
|
85
84
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, __spreadProps(__spreadValues({
|
|
86
|
-
"data-testid": "ds-radio"
|
|
85
|
+
"data-testid": "ds-radio",
|
|
86
|
+
type: "radio"
|
|
87
87
|
}, restGlobals), {
|
|
88
|
-
id,
|
|
88
|
+
id: instanceUid,
|
|
89
89
|
ref: innerRef,
|
|
90
|
-
type: "radio",
|
|
91
90
|
checked,
|
|
92
91
|
disabled,
|
|
93
92
|
onChange: handleOnChange
|
|
94
|
-
}))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel,
|
|
95
|
-
htmlFor:
|
|
93
|
+
}))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
|
|
94
|
+
htmlFor: instanceUid,
|
|
96
95
|
disabled,
|
|
97
96
|
readOnly,
|
|
98
97
|
checked,
|
|
99
98
|
"data-testid": "ds-radio-label",
|
|
100
99
|
wrapLabel
|
|
101
|
-
},
|
|
100
|
+
}, wrapLabel ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledWrapLabel, null, label) : /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
102
101
|
value: label
|
|
103
102
|
})));
|
|
104
103
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledRadio.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } =\n useGetGlobalAttributes<DSControlledRadioT.Props>(propsWithDefault);\n\n const
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } =\n useGetGlobalAttributes<DSControlledRadioT.Props>(propsWithDefault);\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const handleOnChange = useCallback(\n (e: React.ChangeEvent) => {\n if (onChange && value) onChange(value, e);\n },\n [onChange, value],\n );\n\n return (\n <StyledContainer data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n <StyledRadio checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n <StyledInput\n data-testid=\"ds-radio\"\n type=\"radio\"\n {...restGlobals}\n id={instanceUid}\n ref={innerRef}\n checked={checked}\n disabled={disabled}\n onChange={handleOnChange}\n />\n </StyledRadio>\n {label && (\n <StyledLabel\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-radio-label\"\n wrapLabel={wrapLabel}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledRadio.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+D;AAC/D,0BAKO;AACP,iBAAoB;AAEpB,uCAA2C;AAC3C,oBAAwF;AACxF,mCAA4D;AAC5D,8BAAiC;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;AAEjC,QAAM,EAAE,SAAS,UAAU,UAAU,OAAO,WAAW,aAAa;AAEpE,QACE,qDAAiD,gBAAgB,GAD3D,MAAI,UAAU,UAAU,OAAO,WAAW,aAChD,IAD6D,wBAC7D,IAD6D,CAAvD,MAAI,YAAU,YAAU,SAAO,aAAW;AAGlD,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACpD,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,QAAM,iBAAiB,8BACrB,CAAC,MAAyB;AACxB,QAAI,YAAY;AAAO,eAAS,OAAO,CAAC;AAAA,EAC1C,GACA,CAAC,UAAU,KAAK,CAClB;AAEA,SACE,mDAAC;AAAA,IAAgB,eAAY;AAAA,IAAqB;AAAA,KAA0B,eAC1E,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACrE,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,MAAK;AAAA,KACD,cAHL;AAAA,IAIC,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACZ,CACF,GACC,SACC,mDAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KAEC,YAAY,mDAAC,qCAAiB,KAAM,IAAqB,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useValidateProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledRadioT } from '../react-desc-prop-types';\n\nconst throwError = (message: string): void => {\n throw new Error(\n `DSControlledRadio:: ${message}\n `,\n );\n};\n\nexport const useValidateProps = (props: DSControlledRadioT.Props, propTypes: DSControlledRadioT.Props): void => {\n useValidateTypescriptPropTypes(props, propTypes);\n if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {\n throwError(`Please provide a label or ariaLabel property to use this component.`);\n }\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,uBAAuB;AAAA,GAEzB;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAiC,cAA8C;AAC9G,0DAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,qEAAqE;AAAA,EAClF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSRadioDataTestIds = {\n CONTAINER: 'ds-radio-container',\n INPUT: 'ds-radio',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './data-test-ids';\nexport * from './theming';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,4BAAd;AACA,qCAAc,sBADd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSRadioName = 'DS-Radio';\n\nexport const DSRadioSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,cAAc;AAEpB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { DSControlledRadio, DSControlledRadioWithSchema } from './ControlledRadio';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAA+D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { ChangeEvent, MouseEvent } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, GlobalAttributesT } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledRadioT {\n export interface DefaultProps {\n checked: boolean;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n value?: string;\n onChange?: (newValue: string, e: ChangeEvent | MouseEvent<HTMLLabelElement>) => void;\n label?: string;\n innerRef?: React.RefObject<HTMLInputElement>;\n }\n\n export interface Props extends DefaultProps, OptionalProps, GlobalAttributesT {}\n\n export interface StyledRadioT {\n checked?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean;\n wrapLabel: boolean;\n onClick?: React.MouseEventHandler<HTMLLabelElement>;\n }\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Radio value'),\n onChange: PropTypes.func\n .description('Radio onchange callback')\n .signature('((newValue: string,e: React.ChangeEvent) => void)'),\n label: PropTypes.string.description(\n 'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0F;AAkCnF,MAAM,eAAkD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,OAAO,8BAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,8BAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,mDAAmD;AAAA,EAChE,OAAO,8BAAU,OAAO,YACtB,gGACF;AAAA,EACA,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,8BAAU,KAAK,YAAY,uCAAuC;AAC/E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
package/dist/cjs/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledRadioT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSRadioName, DSRadioSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSRadioName,\n slot: DSRadioSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n align-items: center;\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 50px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n }\n }\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst radioStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSRadioName,\n slot: DSRadioSlots.INPUT,\n})`\n ${radioStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSRadioName,\n slot: DSRadioSlots.LABEL,\n})<DSControlledRadioT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};`\n : `padding-left: ${theme.space.xs}`};\n }\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAA0C;AACnC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,cAAc,6BAAO,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,+CAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,yCAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,yCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,eAAgB,CAAC,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC5E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,6BAAO,MAAM;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean,\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n if (checked) {\n return `\n &:before {\n content:\"\";\n width: ${theme.space.xxs};\n height: ${theme.space.xxs};\n @media (max-width: ${theme.breakpoints.small}) {\n width: 12px;\n height: 12px;\n margin: 5px;\n }\n border-radius:50%;\n display:inline-block;\n margin:3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n }\n `;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA,eAGI,MAAM,MAAM;AAAA,gBACX,MAAM,MAAM;AAAA,2BACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQzB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,EAG/F;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -30,13 +31,14 @@ var __objRest = (source, exclude) => {
|
|
|
30
31
|
return target;
|
|
31
32
|
};
|
|
32
33
|
import * as React from "react";
|
|
33
|
-
import React2, { useCallback } from "react";
|
|
34
|
+
import React2, { useCallback, useMemo } from "react";
|
|
34
35
|
import {
|
|
35
36
|
describe,
|
|
36
37
|
useGetGlobalAttributes,
|
|
37
38
|
useGetXstyledProps,
|
|
38
39
|
useMemoMergePropsWithDefault
|
|
39
40
|
} from "@elliemae/ds-utilities";
|
|
41
|
+
import { uid } from "uid";
|
|
40
42
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
41
43
|
import { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from "./styles";
|
|
42
44
|
import { propTypes, defaultProps } from "./react-desc-prop-types";
|
|
@@ -46,13 +48,10 @@ const DSControlledRadio = (props) => {
|
|
|
46
48
|
useValidateProps(props, propTypes);
|
|
47
49
|
const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;
|
|
48
50
|
const _a = useGetGlobalAttributes(propsWithDefault), { id, disabled, readOnly, label, className, tabIndex } = _a, restGlobals = __objRest(_a, ["id", "disabled", "readOnly", "label", "className", "tabIndex"]);
|
|
51
|
+
const instanceUid = useMemo(() => id || uid(5), [id]);
|
|
49
52
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
50
53
|
const handleOnChange = useCallback((e) => {
|
|
51
|
-
if (onChange)
|
|
52
|
-
onChange(value, e);
|
|
53
|
-
}, [onChange, value]);
|
|
54
|
-
const handleOnLabelClick = useCallback((e) => {
|
|
55
|
-
if (onChange)
|
|
54
|
+
if (onChange && value)
|
|
56
55
|
onChange(value, e);
|
|
57
56
|
}, [onChange, value]);
|
|
58
57
|
return /* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues({
|
|
@@ -64,22 +63,22 @@ const DSControlledRadio = (props) => {
|
|
|
64
63
|
disabled,
|
|
65
64
|
readOnly
|
|
66
65
|
}, /* @__PURE__ */ React2.createElement(StyledInput, __spreadProps(__spreadValues({
|
|
67
|
-
"data-testid": "ds-radio"
|
|
66
|
+
"data-testid": "ds-radio",
|
|
67
|
+
type: "radio"
|
|
68
68
|
}, restGlobals), {
|
|
69
|
-
id,
|
|
69
|
+
id: instanceUid,
|
|
70
70
|
ref: innerRef,
|
|
71
|
-
type: "radio",
|
|
72
71
|
checked,
|
|
73
72
|
disabled,
|
|
74
73
|
onChange: handleOnChange
|
|
75
|
-
}))), label && /* @__PURE__ */ React2.createElement(StyledLabel,
|
|
76
|
-
htmlFor:
|
|
74
|
+
}))), label && /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
75
|
+
htmlFor: instanceUid,
|
|
77
76
|
disabled,
|
|
78
77
|
readOnly,
|
|
79
78
|
checked,
|
|
80
79
|
"data-testid": "ds-radio-label",
|
|
81
80
|
wrapLabel
|
|
82
|
-
},
|
|
81
|
+
}, wrapLabel ? /* @__PURE__ */ React2.createElement(StyledWrapLabel, null, label) : /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
83
82
|
value: label
|
|
84
83
|
})));
|
|
85
84
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledRadio.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } =\n useGetGlobalAttributes<DSControlledRadioT.Props>(propsWithDefault);\n\n const
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } =\n useGetGlobalAttributes<DSControlledRadioT.Props>(propsWithDefault);\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const handleOnChange = useCallback(\n (e: React.ChangeEvent) => {\n if (onChange && value) onChange(value, e);\n },\n [onChange, value],\n );\n\n return (\n <StyledContainer data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n <StyledRadio checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n <StyledInput\n data-testid=\"ds-radio\"\n type=\"radio\"\n {...restGlobals}\n id={instanceUid}\n ref={innerRef}\n checked={checked}\n disabled={disabled}\n onChange={handleOnChange}\n />\n </StyledRadio>\n {label && (\n <StyledLabel\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-radio-label\"\n wrapLabel={wrapLabel}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledRadio.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;AACA;AACA;AACA;AAEA,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AAEjC,QAAM,EAAE,SAAS,UAAU,UAAU,OAAO,WAAW,aAAa;AAEpE,QACE,4BAAiD,gBAAgB,GAD3D,MAAI,UAAU,UAAU,OAAO,WAAW,aAChD,IAD6D,wBAC7D,IAD6D,CAAvD,MAAI,YAAU,YAAU,SAAO,aAAW;AAGlD,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACpD,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,iBAAiB,YACrB,CAAC,MAAyB;AACxB,QAAI,YAAY;AAAO,eAAS,OAAO,CAAC;AAAA,EAC1C,GACA,CAAC,UAAU,KAAK,CAClB;AAEA,SACE,qCAAC;AAAA,IAAgB,eAAY;AAAA,IAAqB;AAAA,KAA0B,eAC1E,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACrE,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,MAAK;AAAA,KACD,cAHL;AAAA,IAIC,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACZ,CACF,GACC,SACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KAEC,YAAY,qCAAC,uBAAiB,KAAM,IAAqB,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledRadioT } from '../react-desc-prop-types';\n\nconst throwError = (message: string): void => {\n throw new Error(\n `DSControlledRadio:: ${message}\n `,\n );\n};\n\nexport const useValidateProps = (props: DSControlledRadioT.Props, propTypes: DSControlledRadioT.Props): void => {\n useValidateTypescriptPropTypes(props, propTypes);\n if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {\n throwError(`Please provide a label or ariaLabel property to use this component.`);\n }\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAGA,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,uBAAuB;AAAA,GAEzB;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAiC,cAA8C;AAC9G,iCAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,qEAAqE;AAAA,EAClF;AACF;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;AAGA,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,uBAAuB;AAAA,GAEzB;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAiC,cAA8C;AAC9G,iCAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,qEAAqE;AAAA,EAClF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSRadioDataTestIds = {\n CONTAINER: 'ds-radio-container',\n INPUT: 'ds-radio',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
5
|
+
"mappings": ";AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids';\nexport * from './theming';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSRadioName = 'DS-Radio';\n\nexport const DSRadioSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,cAAc;AAEpB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
5
|
+
"mappings": ";AAAA;ACAO,MAAM,cAAc;AAEpB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledRadio, DSControlledRadioWithSchema } from './ControlledRadio';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { ChangeEvent, MouseEvent } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, GlobalAttributesT } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledRadioT {\n export interface DefaultProps {\n checked: boolean;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n value?: string;\n onChange?: (newValue: string, e: ChangeEvent | MouseEvent<HTMLLabelElement>) => void;\n label?: string;\n innerRef?: React.RefObject<HTMLInputElement>;\n }\n\n export interface Props extends DefaultProps, OptionalProps, GlobalAttributesT {}\n\n export interface StyledRadioT {\n checked?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean;\n wrapLabel: boolean;\n onClick?: React.MouseEventHandler<HTMLLabelElement>;\n }\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Radio value'),\n onChange: PropTypes.func\n .description('Radio onchange callback')\n .signature('((newValue: string,e: React.ChangeEvent) => void)'),\n label: PropTypes.string.description(\n 'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAkCO,MAAM,eAAkD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,mDAAmD;AAAA,EAChE,OAAO,UAAU,OAAO,YACtB,gGACF;AAAA,EACA,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAC/E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
package/dist/esm/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledRadioT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSRadioName, DSRadioSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSRadioName,\n slot: DSRadioSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n align-items: center;\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 50px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n }\n }\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst radioStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSRadioName,\n slot: DSRadioSlots.INPUT,\n})`\n ${radioStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSRadioName,\n slot: DSRadioSlots.LABEL,\n})<DSControlledRadioT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};`\n : `padding-left: ${theme.space.xs}`};\n }\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AACA;AACO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,aAAa;AACrB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,cAAc,OAAO,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,sBAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,gBAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,eAAgB,CAAC,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC5E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,aAAa;AACrB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,aAAa;AACrB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;AAEA;AACA;AACO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,aAAa;AACrB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,cAAc,OAAO,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,sBAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,gBAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,eAAgB,CAAC,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC5E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,aAAa;AACrB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,aAAa;AACrB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean,\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n if (checked) {\n return `\n &:before {\n content:\"\";\n width: ${theme.space.xxs};\n height: ${theme.space.xxs};\n @media (max-width: ${theme.breakpoints.small}) {\n width: 12px;\n height: 12px;\n margin: 5px;\n }\n border-radius:50%;\n display:inline-block;\n margin:3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n }\n `;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACGO,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA,eAGI,MAAM,MAAM;AAAA,gBACX,MAAM,MAAM;AAAA,2BACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQzB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,EAG/F;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
5
|
+
"mappings": ";AAAA;ACGO,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA,eAGI,MAAM,MAAM;AAAA,gBACX,MAAM,MAAM;AAAA,2BACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQzB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,EAG/F;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-radio",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.1-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Radio",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.2.
|
|
39
|
-
"@elliemae/ds-truncated-tooltip-text": "3.2.
|
|
40
|
-
"@elliemae/ds-utilities": "3.2.
|
|
38
|
+
"@elliemae/ds-system": "3.2.1-rc.2",
|
|
39
|
+
"@elliemae/ds-truncated-tooltip-text": "3.2.1-rc.2",
|
|
40
|
+
"@elliemae/ds-utilities": "3.2.1-rc.2"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-theme": "~2.6.0",
|