@elliemae/ds-button-v2 3.60.0-next.4 → 3.60.0-next.40
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/parts/SharedButtonBaseline/DSButton.js +23 -21
- package/dist/cjs/parts/SharedButtonBaseline/DSButton.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js +1 -13
- package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/styles.js +41 -27
- package/dist/cjs/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/DSButton.js +25 -23
- package/dist/esm/parts/SharedButtonBaseline/DSButton.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/config/useButton.js +1 -13
- package/dist/esm/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/styles.js +41 -27
- package/dist/esm/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/types/parts/SharedButtonBaseline/config/useButton.d.ts +0 -2
- package/dist/types/parts/SharedButtonBaseline/react-desc-prop-types.d.ts +5 -0
- package/dist/types/parts/SharedButtonBaseline/styles.d.ts +9 -9
- package/package.json +21 -23
- package/dist/cjs/parts/SharedButtonBaseline/config/useButtonRenderer.js +0 -50
- package/dist/cjs/parts/SharedButtonBaseline/config/useButtonRenderer.js.map +0 -7
- package/dist/esm/parts/SharedButtonBaseline/config/useButtonRenderer.js +0 -20
- package/dist/esm/parts/SharedButtonBaseline/config/useButtonRenderer.js.map +0 -7
- package/dist/types/parts/SharedButtonBaseline/config/useButtonRenderer.d.ts +0 -2
|
@@ -36,38 +36,40 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
38
|
var import_useButton = require("./config/useButton.js");
|
|
39
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
39
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
40
|
+
var import_constants = require("../../constants.js");
|
|
41
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
41
42
|
var import_styles = require("./styles.js");
|
|
43
|
+
const ButtonRenderer = (unsanitizedProps) => {
|
|
44
|
+
const { children, ...propsToDrill } = unsanitizedProps;
|
|
45
|
+
const buttonType = propsToDrill.$buttonType;
|
|
46
|
+
if (buttonType === import_constants.BUTTON_TYPES.FILLED || buttonType === import_constants.BUTTON_TYPES.ICON_FILLED)
|
|
47
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.FilledButton, { ...propsToDrill, children });
|
|
48
|
+
if (buttonType === import_constants.BUTTON_TYPES.OUTLINE || buttonType === import_constants.BUTTON_TYPES.ICON_OUTLINE)
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.OutlineButton, { ...propsToDrill, children });
|
|
50
|
+
if (buttonType === import_constants.BUTTON_TYPES.TEXT || buttonType === import_constants.BUTTON_TYPES.ICON)
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.TextButton, { ...propsToDrill, children });
|
|
52
|
+
if (buttonType === import_constants.BUTTON_TYPES.RAW) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RawButton, { ...propsToDrill, children });
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.DefaultButton, { ...propsToDrill, children });
|
|
54
|
+
};
|
|
42
55
|
const DSButton = (props) => {
|
|
43
|
-
const {
|
|
44
|
-
|
|
45
|
-
tabIndex,
|
|
46
|
-
handleOnMouseDown,
|
|
47
|
-
globalProps,
|
|
48
|
-
xstyledProps,
|
|
49
|
-
handleOnKeyDown,
|
|
50
|
-
handleOnClick,
|
|
51
|
-
ButtonRenderer
|
|
52
|
-
} = (0, import_useButton.useButton)(props);
|
|
53
|
-
const { size, buttonType, innerRef, children, type, shape, isV3, applyAriaDisabled } = propsWithDefault;
|
|
54
|
-
const { disabled, ...restGlobalProps } = globalProps;
|
|
55
|
-
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
56
|
+
const { propsWithDefault, tabIndex, handleOnMouseDown, globalProps, xstyledProps, handleOnKeyDown, handleOnClick } = (0, import_useButton.useButton)(props);
|
|
57
|
+
const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled, disabled, shape } = propsWithDefault;
|
|
56
58
|
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
|
|
59
|
+
const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;
|
|
57
60
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
58
61
|
ButtonRenderer,
|
|
59
62
|
{
|
|
60
|
-
"aria-disabled":
|
|
61
|
-
...
|
|
63
|
+
"aria-disabled": applyAriaDisabled || disabled,
|
|
64
|
+
...propsWithoutReusedGlobals,
|
|
62
65
|
...xstyledProps,
|
|
63
|
-
...globalAttributes,
|
|
64
66
|
...ownerPropsConfig,
|
|
65
|
-
shape,
|
|
67
|
+
$shape: shape,
|
|
68
|
+
$buttonType: buttonType,
|
|
69
|
+
$size: size,
|
|
70
|
+
$isV3: isV3,
|
|
66
71
|
type,
|
|
67
|
-
buttonType,
|
|
68
72
|
tabIndex,
|
|
69
|
-
size,
|
|
70
|
-
isV3,
|
|
71
73
|
innerRef,
|
|
72
74
|
onKeyDown: handleOnKeyDown,
|
|
73
75
|
onClick: handleOnClick,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/DSButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useButton } from './config/useButton.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\nimport { BUTTON_TYPES } from '../../constants.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport type { StyledButtonPropsT } from './styles.js';\nimport { DefaultButton, FilledButton, OutlineButton, RawButton, StyledPseudoBorder, TextButton } from './styles.js';\n\ntype ButtonRendererPropsT = React.PropsWithChildren<StyledButtonPropsT & DSButtonT.StyledButtonInheritedDrilledProps>;\nconst ButtonRenderer = (unsanitizedProps: ButtonRendererPropsT) => {\n const { children, ...propsToDrill } = unsanitizedProps;\n const buttonType = propsToDrill.$buttonType;\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED)\n return <FilledButton {...propsToDrill}>{children}</FilledButton>;\n if (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.ICON_OUTLINE)\n return <OutlineButton {...propsToDrill}>{children}</OutlineButton>;\n if (buttonType === BUTTON_TYPES.TEXT || buttonType === BUTTON_TYPES.ICON)\n return <TextButton {...propsToDrill}>{children}</TextButton>;\n if (buttonType === BUTTON_TYPES.RAW) return <RawButton {...propsToDrill}>{children}</RawButton>;\n return <DefaultButton {...propsToDrill}>{children}</DefaultButton>;\n};\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const { propsWithDefault, tabIndex, handleOnMouseDown, globalProps, xstyledProps, handleOnKeyDown, handleOnClick } =\n useButton(props);\n const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled, disabled, shape } = propsWithDefault;\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;\n\n return (\n <ButtonRenderer\n aria-disabled={applyAriaDisabled || disabled} // this should not print when false but it's a breaking change that needs to be coordinated\n {...propsWithoutReusedGlobals}\n {...xstyledProps}\n {...ownerPropsConfig}\n $shape={shape}\n $buttonType={buttonType}\n $size={size}\n $isV3={isV3}\n type={type}\n tabIndex={tabIndex}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n <StyledPseudoBorder className=\"pseudo-border\" aria-hidden=\"true\" />\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADeZ;AAfX,8BAAwC;AAExC,uBAA0B;AAC1B,iCAA6B;AAC7B,uBAA6B;AAE7B,mCAAkC;AAElC,oBAAsG;AAGtG,MAAM,iBAAiB,CAAC,qBAA2C;AACjE,QAAM,EAAE,UAAU,GAAG,aAAa,IAAI;AACtC,QAAM,aAAa,aAAa;AAChC,MAAI,eAAe,8BAAa,UAAU,eAAe,8BAAa;AACpE,WAAO,4CAAC,8BAAc,GAAG,cAAe,UAAS;AACnD,MAAI,eAAe,8BAAa,WAAW,eAAe,8BAAa;AACrE,WAAO,4CAAC,+BAAe,GAAG,cAAe,UAAS;AACpD,MAAI,eAAe,8BAAa,QAAQ,eAAe,8BAAa;AAClE,WAAO,4CAAC,4BAAY,GAAG,cAAe,UAAS;AACjD,MAAI,eAAe,8BAAa,IAAK,QAAO,4CAAC,2BAAW,GAAG,cAAe,UAAS;AACnF,SAAO,4CAAC,+BAAe,GAAG,cAAe,UAAS;AACpD;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,UAAU,mBAAmB,aAAa,cAAc,iBAAiB,cAAc,QAC/G,4BAAU,KAAK;AACjB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,mBAAmB,UAAU,MAAM,IAAI;AACjG,QAAM,uBAAmB,uCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AACrE,QAAM,EAAE,OAAO,oBAAoB,GAAG,0BAA0B,IAAI;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,qBAAqB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEb;AAAA,oDAAC,oCAAmB,WAAU,iBAAgB,eAAY,QAAO;AAAA,QAChE;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,14 +36,12 @@ var import_react = __toESM(require("react"));
|
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
38
38
|
var import_useValidateProps = require("./useValidateProps.js");
|
|
39
|
-
var import_useButtonRenderer = require("./useButtonRenderer.js");
|
|
40
39
|
const useButton = (props) => {
|
|
41
40
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
42
41
|
(0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.DSButtonPropTypes);
|
|
43
42
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
44
43
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
45
44
|
const { disabled } = globalProps;
|
|
46
|
-
const ButtonRenderer = (0, import_useButtonRenderer.useButtonRenderer)(propsWithDefault);
|
|
47
45
|
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;
|
|
48
46
|
const standardizedType = String(type).toLowerCase();
|
|
49
47
|
const handleOnKeyDown = import_react.default.useCallback(
|
|
@@ -86,22 +84,12 @@ const useButton = (props) => {
|
|
|
86
84
|
propsWithDefault,
|
|
87
85
|
globalProps,
|
|
88
86
|
xstyledProps,
|
|
89
|
-
ButtonRenderer,
|
|
90
87
|
handleOnKeyDown,
|
|
91
88
|
handleOnClick,
|
|
92
89
|
tabIndex,
|
|
93
90
|
handleOnMouseDown
|
|
94
91
|
}),
|
|
95
|
-
[
|
|
96
|
-
propsWithDefault,
|
|
97
|
-
globalProps,
|
|
98
|
-
xstyledProps,
|
|
99
|
-
ButtonRenderer,
|
|
100
|
-
handleOnKeyDown,
|
|
101
|
-
handleOnClick,
|
|
102
|
-
tabIndex,
|
|
103
|
-
handleOnMouseDown
|
|
104
|
-
]
|
|
92
|
+
[propsWithDefault, globalProps, xstyledProps, handleOnKeyDown, handleOnClick, tabIndex, handleOnMouseDown]
|
|
105
93
|
);
|
|
106
94
|
};
|
|
107
95
|
//# sourceMappingURL=useButton.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/SharedButtonBaseline/config/useButton.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAGzF,mCAAgD;AAChD,8BAAiC;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButton = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;\n\n // html allows any caps combination, we don't want to re-render on case change and our checks to care about case-sensitivity\n const standardizedType = String(type).toLowerCase();\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key) && (disabled || applyAriaDisabled)) {\n e.preventDefault();\n return;\n }\n\n onKeyDown?.(e);\n if (standardizedType !== 'submit' && ['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) {\n return;\n }\n\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\n\n const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n },\n [disabled, onMouseDown],\n );\n\n const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [propsWithDefault, globalProps, xstyledProps, handleOnKeyDown, handleOnClick, tabIndex, handleOnMouseDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAGzF,mCAAgD;AAChD,8BAAiC;AAY1B,MAAM,YAAY,CAAC,UAAkD;AAI1E,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,gDAAmE,gBAAgB;AACvG,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,EAAE,WAAW,SAAS,aAAa,mBAAmB,KAAK,IAAI;AAGrE,QAAM,mBAAmB,OAAO,IAAI,EAAE,YAAY;AAElD,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,MAAM,YAAY,oBAAoB;AAC5E,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,UAAI,qBAAqB,YAAY,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1E,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,WAAW,kBAAkB,OAAO;AAAA,EACpE;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,iBAAiB,eAAe,UAAU,iBAAiB;AAAA,EAC3G;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAYO;AACP,iCAAgE;
|
|
4
|
+
"sourcesContent": ["import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAYO;AACP,iCAAgE;AAsDzD,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,8CAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,mBAAmB;AACrB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,OAAG,kDAAyB,yCAAc,wCAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,QAAQ,kCAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,kCAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,kCAAU,MAAM,uCAAsB,EACzC;AAAA,IACC,GAAG,wCAAuB;AAAA,EAC5B,EACC,aAAa,8BAAa,CAAC;AAAA,EAC9B,SAAS,kCAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,8CAAmB,IAAI;AAAA,EAC7G,yBAAyB,kCAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD,oDAAmC;AAAA,EACtF;AAAA,EACA,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -47,16 +47,17 @@ const StyledPseudoBorder = (0, import_ds_system.styled)("span")`
|
|
|
47
47
|
const pseudoBorder = import_ds_system.css`
|
|
48
48
|
position: absolute;
|
|
49
49
|
border-style: solid;
|
|
50
|
-
border-width: ${({ size, buttonType }) => size === import_constants.BUTTON_SIZES.S && buttonType === import_constants.BUTTON_TYPES.FILLED ? "1px" : "2px"};
|
|
51
|
-
${(
|
|
52
|
-
|
|
50
|
+
border-width: ${({ $size, $buttonType }) => $size === import_constants.BUTTON_SIZES.S && $buttonType === import_constants.BUTTON_TYPES.FILLED ? "1px" : "2px"};
|
|
51
|
+
${(styledProps) => {
|
|
52
|
+
const { $buttonType, $shape, theme } = styledProps;
|
|
53
|
+
if ($buttonType === import_constants.BUTTON_TYPES.FILLED || $buttonType === import_constants.BUTTON_TYPES.ICON_FILLED) {
|
|
53
54
|
return `
|
|
54
55
|
top: 0;
|
|
55
56
|
left: 0;
|
|
56
57
|
width: 100%;
|
|
57
58
|
height: 100%;
|
|
58
59
|
border-color: ${theme.colors.neutral["000"]};
|
|
59
|
-
border-radius: ${shape !== import_constants.BUTTON_SHAPES.DEFAULT ? "50%" : "0px"};
|
|
60
|
+
border-radius: ${$shape !== import_constants.BUTTON_SHAPES.DEFAULT ? "50%" : "0px"};
|
|
60
61
|
`;
|
|
61
62
|
}
|
|
62
63
|
return `
|
|
@@ -64,15 +65,15 @@ const pseudoBorder = import_ds_system.css`
|
|
|
64
65
|
left: -1px;
|
|
65
66
|
width: calc(100% + 2px);
|
|
66
67
|
height: calc(100% + 2px);
|
|
67
|
-
border-radius: ${shape !== import_constants.BUTTON_SHAPES.DEFAULT ? "50%" : "2px"};
|
|
68
|
+
border-radius: ${$shape !== import_constants.BUTTON_SHAPES.DEFAULT ? "50%" : "2px"};
|
|
68
69
|
`;
|
|
69
70
|
}}
|
|
70
71
|
`;
|
|
71
72
|
const fontSizeSettings = import_ds_system.css`
|
|
72
|
-
${({ theme, size, buttonType }) => {
|
|
73
|
-
switch (size) {
|
|
73
|
+
${({ theme, $size, $buttonType }) => {
|
|
74
|
+
switch ($size) {
|
|
74
75
|
case import_constants.BUTTON_SIZES.S:
|
|
75
|
-
if (buttonType === import_constants.BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;
|
|
76
|
+
if ($buttonType === import_constants.BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;
|
|
76
77
|
return `font-size: ${theme.fontSizes.label[300]};`;
|
|
77
78
|
case import_constants.BUTTON_SIZES.L:
|
|
78
79
|
return `
|
|
@@ -85,10 +86,7 @@ const fontSizeSettings = import_ds_system.css`
|
|
|
85
86
|
}
|
|
86
87
|
}}
|
|
87
88
|
`;
|
|
88
|
-
const
|
|
89
|
-
name: import_DSButtonDefinitions.DSButtonName,
|
|
90
|
-
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
91
|
-
})`
|
|
89
|
+
const resetButtonStyles = import_ds_system.css`
|
|
92
90
|
outline: none;
|
|
93
91
|
border: none;
|
|
94
92
|
background: transparent;
|
|
@@ -96,22 +94,26 @@ const RawButton = (0, import_ds_system.styled)("button", {
|
|
|
96
94
|
background: transparent;
|
|
97
95
|
}
|
|
98
96
|
`;
|
|
99
|
-
const
|
|
97
|
+
const RawButton = (0, import_ds_system.styled)("button", {
|
|
100
98
|
name: import_DSButtonDefinitions.DSButtonName,
|
|
101
99
|
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
102
100
|
})`
|
|
101
|
+
${resetButtonStyles}
|
|
102
|
+
`;
|
|
103
|
+
const defaultButtonStyles = import_ds_system.css`
|
|
104
|
+
${resetButtonStyles}
|
|
103
105
|
display: inline-grid;
|
|
104
106
|
grid-gap: 0.615rem;
|
|
105
107
|
position: relative;
|
|
106
108
|
grid-auto-flow: column;
|
|
107
109
|
place-items: center;
|
|
108
|
-
align-items: ${({ buttonType, isV3 }) => isV3 === false || buttonType === import_constants.BUTTON_TYPES.ICON || buttonType === import_constants.BUTTON_TYPES.ICON_OUTLINE || buttonType === import_constants.BUTTON_TYPES.ICON_FILLED ? "center" : "start"};
|
|
110
|
+
align-items: ${({ $buttonType, $isV3 }) => $isV3 === false || $buttonType === import_constants.BUTTON_TYPES.ICON || $buttonType === import_constants.BUTTON_TYPES.ICON_OUTLINE || $buttonType === import_constants.BUTTON_TYPES.ICON_FILLED ? "center" : "start"};
|
|
109
111
|
justify-items: center;
|
|
110
112
|
width: fit-content;
|
|
111
113
|
cursor: pointer;
|
|
112
114
|
font-weight: 600;
|
|
113
|
-
${({ isV3, theme }) => {
|
|
114
|
-
if (isV3) {
|
|
115
|
+
${({ $isV3, theme }) => {
|
|
116
|
+
if ($isV3) {
|
|
115
117
|
return `
|
|
116
118
|
align-content: space-evenly;
|
|
117
119
|
text-align: left;
|
|
@@ -123,31 +125,41 @@ const DefaultButton = (0, import_ds_system.styled)(RawButton, {
|
|
|
123
125
|
}
|
|
124
126
|
return "";
|
|
125
127
|
}}
|
|
126
|
-
padding: ${({ theme, buttonType, size, isV3 }) => buttonType === import_constants.BUTTON_TYPES.ICON || buttonType === import_constants.BUTTON_TYPES.ICON_OUTLINE || buttonType === import_constants.BUTTON_TYPES.ICON_FILLED ? "0" : isV3 === false ? `0 ${theme.space.xs};` : size === import_constants.BUTTON_SIZES.S ? `0.5px ${theme.space.xs} 0.5px` : size === import_constants.BUTTON_SIZES.M && (buttonType === import_constants.BUTTON_TYPES.OUTLINE || buttonType === import_constants.BUTTON_TYPES.TEXT) ? `2.5px ${theme.space.xs} 2.5px` : size === import_constants.BUTTON_SIZES.M ? `2px ${theme.space.xs} 2px` : size === import_constants.BUTTON_SIZES.L && (buttonType === import_constants.BUTTON_TYPES.OUTLINE || buttonType === import_constants.BUTTON_TYPES.TEXT) ? `5.5px ${theme.space.xs} 5.5px` : `5px ${theme.space.xs} 5px`};
|
|
128
|
+
padding: ${({ theme, $buttonType, $size, $isV3 }) => $buttonType === import_constants.BUTTON_TYPES.ICON || $buttonType === import_constants.BUTTON_TYPES.ICON_OUTLINE || $buttonType === import_constants.BUTTON_TYPES.ICON_FILLED ? "0" : $isV3 === false ? `0 ${theme.space.xs};` : $size === import_constants.BUTTON_SIZES.S ? `0.5px ${theme.space.xs} 0.5px` : $size === import_constants.BUTTON_SIZES.M && ($buttonType === import_constants.BUTTON_TYPES.OUTLINE || $buttonType === import_constants.BUTTON_TYPES.TEXT) ? `2.5px ${theme.space.xs} 2.5px` : $size === import_constants.BUTTON_SIZES.M ? `2px ${theme.space.xs} 2px` : $size === import_constants.BUTTON_SIZES.L && ($buttonType === import_constants.BUTTON_TYPES.OUTLINE || $buttonType === import_constants.BUTTON_TYPES.TEXT) ? `5.5px ${theme.space.xs} 5.5px` : `5px ${theme.space.xs} 5px`};
|
|
127
129
|
border-style: solid;
|
|
128
|
-
${({ size, isV3 }) => isV3 ? `min-height: ${import_constants.mobileSizes[size]};` : `height: ${import_constants.mobileSizes[size]};`}
|
|
129
|
-
min-width: ${({ size }) => import_constants.mobileSizes[size]};
|
|
130
|
+
${({ $size, $isV3 }) => $isV3 ? `min-height: ${import_constants.mobileSizes[$size]};` : `height: ${import_constants.mobileSizes[$size]};`}
|
|
131
|
+
min-width: ${({ $size }) => import_constants.mobileSizes[$size]};
|
|
130
132
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
131
|
-
${({ size, isV3 }) => isV3 ? `min-height: ${import_constants.sizes[size]};` : `height: ${import_constants.sizes[size]};`}
|
|
132
|
-
min-width: ${({ size }) => import_constants.sizes[size]};
|
|
133
|
+
${({ $size, $isV3 }) => $isV3 ? `min-height: ${import_constants.sizes[$size]};` : `height: ${import_constants.sizes[$size]};`}
|
|
134
|
+
min-width: ${({ $size }) => import_constants.sizes[$size]};
|
|
133
135
|
}
|
|
134
|
-
border-radius: ${(
|
|
136
|
+
border-radius: ${(styledProps) => {
|
|
137
|
+
const { $shape } = styledProps;
|
|
138
|
+
return $shape === import_constants.BUTTON_SHAPES.DEFAULT ? "2px" : "50%";
|
|
139
|
+
}};
|
|
135
140
|
${fontSizeSettings}
|
|
136
|
-
${({ buttonType }) => buttonType === import_constants.BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
|
|
141
|
+
${({ $buttonType }) => $buttonType === import_constants.BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
|
|
137
142
|
&[aria-disabled='true'],
|
|
138
143
|
&[disabled] {
|
|
139
144
|
cursor: not-allowed;
|
|
140
145
|
}
|
|
141
146
|
${import_ds_system.xStyledCommonProps}
|
|
142
147
|
`;
|
|
143
|
-
const
|
|
148
|
+
const DefaultButton = (0, import_ds_system.styled)("button", {
|
|
149
|
+
name: import_DSButtonDefinitions.DSButtonName,
|
|
150
|
+
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
151
|
+
})`
|
|
152
|
+
${defaultButtonStyles}
|
|
153
|
+
`;
|
|
154
|
+
const FilledButton = (0, import_ds_system.styled)("button", {
|
|
144
155
|
name: import_DSButtonDefinitions.DSButtonName,
|
|
145
156
|
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
146
157
|
})`
|
|
158
|
+
${defaultButtonStyles}
|
|
147
159
|
background-color: brand-600;
|
|
148
160
|
border-color: brand-600;
|
|
149
161
|
color: neutral-000;
|
|
150
|
-
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
162
|
+
border-width: ${({ $size }) => $size === "s" ? "1px;" : "2px"};
|
|
151
163
|
&:focus,
|
|
152
164
|
&[data-testemulatestate='focus'] {
|
|
153
165
|
border-color: brand-700;
|
|
@@ -204,10 +216,11 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
204
216
|
border-color: neutral-100;
|
|
205
217
|
}
|
|
206
218
|
`;
|
|
207
|
-
const OutlineButton = (0, import_ds_system.styled)(
|
|
219
|
+
const OutlineButton = (0, import_ds_system.styled)("button", {
|
|
208
220
|
name: import_DSButtonDefinitions.DSButtonName,
|
|
209
221
|
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
210
222
|
})`
|
|
223
|
+
${defaultButtonStyles}
|
|
211
224
|
background: neutral-000;
|
|
212
225
|
border-color: neutral-400;
|
|
213
226
|
color: brand-600;
|
|
@@ -250,10 +263,11 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
250
263
|
border-color: brand-700;
|
|
251
264
|
}
|
|
252
265
|
`;
|
|
253
|
-
const TextButton = (0, import_ds_system.styled)(
|
|
266
|
+
const TextButton = (0, import_ds_system.styled)("button", {
|
|
254
267
|
name: import_DSButtonDefinitions.DSButtonName,
|
|
255
268
|
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
256
269
|
})`
|
|
270
|
+
${defaultButtonStyles}
|
|
257
271
|
border-color: transparent;
|
|
258
272
|
background-color: transparent;
|
|
259
273
|
border-width: 1px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAgD;AAChD,uBAA8E;AAC9E,iCAA4C;AAUrC,MAAM,yBAAqB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAK/C,MAAM,eAAe;AAAA;AAAA;AAAA,kBAGH,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n $size: DSButtonT.ButtonSizesT;\n $buttonType: DSButtonT.ButtonTypesT;\n $shape: DSButtonT.ButtonShapesT;\n $isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ $size, $buttonType }) =>\n $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\n if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, $size, $buttonType }) => {\n switch ($size) {\n case BUTTON_SIZES.S:\n if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ $buttonType, $isV3 }) =>\n $isV3 === false ||\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ $isV3, theme }) => {\n if ($isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, $buttonType, $size, $isV3 }) =>\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : $isV3 === false\n ? `0 ${theme.space.xs};`\n : $size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : $size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`)}\n min-width: ${({ $size }) => mobileSizes[$size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`)}\n min-width: ${({ $size }) => sizes[$size]};\n }\n border-radius: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\n ${fontSizeSettings}\n ${({ $buttonType }) => ($buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ $size }) => ($size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,39 +1,41 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { describe,
|
|
3
|
+
import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { useButton } from "./config/useButton.js";
|
|
5
|
-
import { DSButtonPropTypes } from "./react-desc-prop-types.js";
|
|
6
5
|
import { DSButtonName } from "./DSButtonDefinitions.js";
|
|
7
|
-
import {
|
|
6
|
+
import { BUTTON_TYPES } from "../../constants.js";
|
|
7
|
+
import { DSButtonPropTypes } from "./react-desc-prop-types.js";
|
|
8
|
+
import { DefaultButton, FilledButton, OutlineButton, RawButton, StyledPseudoBorder, TextButton } from "./styles.js";
|
|
9
|
+
const ButtonRenderer = (unsanitizedProps) => {
|
|
10
|
+
const { children, ...propsToDrill } = unsanitizedProps;
|
|
11
|
+
const buttonType = propsToDrill.$buttonType;
|
|
12
|
+
if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED)
|
|
13
|
+
return /* @__PURE__ */ jsx(FilledButton, { ...propsToDrill, children });
|
|
14
|
+
if (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.ICON_OUTLINE)
|
|
15
|
+
return /* @__PURE__ */ jsx(OutlineButton, { ...propsToDrill, children });
|
|
16
|
+
if (buttonType === BUTTON_TYPES.TEXT || buttonType === BUTTON_TYPES.ICON)
|
|
17
|
+
return /* @__PURE__ */ jsx(TextButton, { ...propsToDrill, children });
|
|
18
|
+
if (buttonType === BUTTON_TYPES.RAW) return /* @__PURE__ */ jsx(RawButton, { ...propsToDrill, children });
|
|
19
|
+
return /* @__PURE__ */ jsx(DefaultButton, { ...propsToDrill, children });
|
|
20
|
+
};
|
|
8
21
|
const DSButton = (props) => {
|
|
9
|
-
const {
|
|
10
|
-
|
|
11
|
-
tabIndex,
|
|
12
|
-
handleOnMouseDown,
|
|
13
|
-
globalProps,
|
|
14
|
-
xstyledProps,
|
|
15
|
-
handleOnKeyDown,
|
|
16
|
-
handleOnClick,
|
|
17
|
-
ButtonRenderer
|
|
18
|
-
} = useButton(props);
|
|
19
|
-
const { size, buttonType, innerRef, children, type, shape, isV3, applyAriaDisabled } = propsWithDefault;
|
|
20
|
-
const { disabled, ...restGlobalProps } = globalProps;
|
|
21
|
-
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
22
|
+
const { propsWithDefault, tabIndex, handleOnMouseDown, globalProps, xstyledProps, handleOnKeyDown, handleOnClick } = useButton(props);
|
|
23
|
+
const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled, disabled, shape } = propsWithDefault;
|
|
22
24
|
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
25
|
+
const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;
|
|
23
26
|
return /* @__PURE__ */ jsxs(
|
|
24
27
|
ButtonRenderer,
|
|
25
28
|
{
|
|
26
|
-
"aria-disabled":
|
|
27
|
-
...
|
|
29
|
+
"aria-disabled": applyAriaDisabled || disabled,
|
|
30
|
+
...propsWithoutReusedGlobals,
|
|
28
31
|
...xstyledProps,
|
|
29
|
-
...globalAttributes,
|
|
30
32
|
...ownerPropsConfig,
|
|
31
|
-
shape,
|
|
33
|
+
$shape: shape,
|
|
34
|
+
$buttonType: buttonType,
|
|
35
|
+
$size: size,
|
|
36
|
+
$isV3: isV3,
|
|
32
37
|
type,
|
|
33
|
-
buttonType,
|
|
34
38
|
tabIndex,
|
|
35
|
-
size,
|
|
36
|
-
isV3,
|
|
37
39
|
innerRef,
|
|
38
40
|
onKeyDown: handleOnKeyDown,
|
|
39
41
|
onClick: handleOnClick,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/DSButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useButton } from './config/useButton.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\nimport { BUTTON_TYPES } from '../../constants.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport type { StyledButtonPropsT } from './styles.js';\nimport { DefaultButton, FilledButton, OutlineButton, RawButton, StyledPseudoBorder, TextButton } from './styles.js';\n\ntype ButtonRendererPropsT = React.PropsWithChildren<StyledButtonPropsT & DSButtonT.StyledButtonInheritedDrilledProps>;\nconst ButtonRenderer = (unsanitizedProps: ButtonRendererPropsT) => {\n const { children, ...propsToDrill } = unsanitizedProps;\n const buttonType = propsToDrill.$buttonType;\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED)\n return <FilledButton {...propsToDrill}>{children}</FilledButton>;\n if (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.ICON_OUTLINE)\n return <OutlineButton {...propsToDrill}>{children}</OutlineButton>;\n if (buttonType === BUTTON_TYPES.TEXT || buttonType === BUTTON_TYPES.ICON)\n return <TextButton {...propsToDrill}>{children}</TextButton>;\n if (buttonType === BUTTON_TYPES.RAW) return <RawButton {...propsToDrill}>{children}</RawButton>;\n return <DefaultButton {...propsToDrill}>{children}</DefaultButton>;\n};\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const { propsWithDefault, tabIndex, handleOnMouseDown, globalProps, xstyledProps, handleOnKeyDown, handleOnClick } =\n useButton(props);\n const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled, disabled, shape } = propsWithDefault;\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;\n\n return (\n <ButtonRenderer\n aria-disabled={applyAriaDisabled || disabled} // this should not print when false but it's a breaking change that needs to be coordinated\n {...propsWithoutReusedGlobals}\n {...xstyledProps}\n {...ownerPropsConfig}\n $shape={shape}\n $buttonType={buttonType}\n $size={size}\n $isV3={isV3}\n type={type}\n tabIndex={tabIndex}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n <StyledPseudoBorder className=\"pseudo-border\" aria-hidden=\"true\" />\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACeZ,cAiBP,YAjBO;AAfX,SAAS,UAAU,qBAAqB;AAExC,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,eAAe,cAAc,eAAe,WAAW,oBAAoB,kBAAkB;AAGtG,MAAM,iBAAiB,CAAC,qBAA2C;AACjE,QAAM,EAAE,UAAU,GAAG,aAAa,IAAI;AACtC,QAAM,aAAa,aAAa;AAChC,MAAI,eAAe,aAAa,UAAU,eAAe,aAAa;AACpE,WAAO,oBAAC,gBAAc,GAAG,cAAe,UAAS;AACnD,MAAI,eAAe,aAAa,WAAW,eAAe,aAAa;AACrE,WAAO,oBAAC,iBAAe,GAAG,cAAe,UAAS;AACpD,MAAI,eAAe,aAAa,QAAQ,eAAe,aAAa;AAClE,WAAO,oBAAC,cAAY,GAAG,cAAe,UAAS;AACjD,MAAI,eAAe,aAAa,IAAK,QAAO,oBAAC,aAAW,GAAG,cAAe,UAAS;AACnF,SAAO,oBAAC,iBAAe,GAAG,cAAe,UAAS;AACpD;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,UAAU,mBAAmB,aAAa,cAAc,iBAAiB,cAAc,IAC/G,UAAU,KAAK;AACjB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,mBAAmB,UAAU,MAAM,IAAI;AACjG,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AACrE,QAAM,EAAE,OAAO,oBAAoB,GAAG,0BAA0B,IAAI;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,qBAAqB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEb;AAAA,4BAAC,sBAAmB,WAAU,iBAAgB,eAAY,QAAO;AAAA,QAChE;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,14 +3,12 @@ import React2 from "react";
|
|
|
3
3
|
import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { defaultProps, DSButtonPropTypes } from "../react-desc-prop-types.js";
|
|
5
5
|
import { useValidateProps } from "./useValidateProps.js";
|
|
6
|
-
import { useButtonRenderer } from "./useButtonRenderer.js";
|
|
7
6
|
const useButton = (props) => {
|
|
8
7
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
9
8
|
useValidateProps(props, DSButtonPropTypes);
|
|
10
9
|
const globalProps = useGetGlobalAttributes(propsWithDefault);
|
|
11
10
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
12
11
|
const { disabled } = globalProps;
|
|
13
|
-
const ButtonRenderer = useButtonRenderer(propsWithDefault);
|
|
14
12
|
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;
|
|
15
13
|
const standardizedType = String(type).toLowerCase();
|
|
16
14
|
const handleOnKeyDown = React2.useCallback(
|
|
@@ -53,22 +51,12 @@ const useButton = (props) => {
|
|
|
53
51
|
propsWithDefault,
|
|
54
52
|
globalProps,
|
|
55
53
|
xstyledProps,
|
|
56
|
-
ButtonRenderer,
|
|
57
54
|
handleOnKeyDown,
|
|
58
55
|
handleOnClick,
|
|
59
56
|
tabIndex,
|
|
60
57
|
handleOnMouseDown
|
|
61
58
|
}),
|
|
62
|
-
[
|
|
63
|
-
propsWithDefault,
|
|
64
|
-
globalProps,
|
|
65
|
-
xstyledProps,
|
|
66
|
-
ButtonRenderer,
|
|
67
|
-
handleOnKeyDown,
|
|
68
|
-
handleOnClick,
|
|
69
|
-
tabIndex,
|
|
70
|
-
handleOnMouseDown
|
|
71
|
-
]
|
|
59
|
+
[propsWithDefault, globalProps, xstyledProps, handleOnKeyDown, handleOnClick, tabIndex, handleOnMouseDown]
|
|
72
60
|
);
|
|
73
61
|
};
|
|
74
62
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/SharedButtonBaseline/config/useButton.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButton = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;\n\n // html allows any caps combination, we don't want to re-render on case change and our checks to care about case-sensitivity\n const standardizedType = String(type).toLowerCase();\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key) && (disabled || applyAriaDisabled)) {\n e.preventDefault();\n return;\n }\n\n onKeyDown?.(e);\n if (standardizedType !== 'submit' && ['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) {\n return;\n }\n\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\n\n const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n },\n [disabled, onMouseDown],\n );\n\n const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [propsWithDefault, globalProps, xstyledProps, handleOnKeyDown, handleOnClick, tabIndex, handleOnMouseDown],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AAY1B,MAAM,YAAY,CAAC,UAAkD;AAI1E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,mBAAiB,OAAO,iBAAiB;AAIzC,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,EAAE,WAAW,SAAS,aAAa,mBAAmB,KAAK,IAAI;AAGrE,QAAM,mBAAmB,OAAO,IAAI,EAAE,YAAY;AAElD,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,MAAM,YAAY,oBAAoB;AAC5E,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,UAAI,qBAAqB,YAAY,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1E,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,WAAW,kBAAkB,OAAO;AAAA,EACpE;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,QAAM,oBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,iBAAiB,eAAe,UAAU,iBAAiB;AAAA,EAC3G;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,cAAc,qBAAqB;AAsDzD,MAAM,eAAuC;AAAA,EAClD,MAAM,aAAa;AAAA,EACnB,YAAY,aAAa;AAAA,EACzB,OAAO,cAAc;AAAA,EACrB,eAAe,mBAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,mBAAmB;AACrB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,QAAQ,UAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM,sBAAsB,EAC/C,YAAY,uBAAuB,EACnC,aAAa,aAAa,MAAM;AAAA,EACnC,OAAO,UAAU,MAAM,uBAAuB,EAC3C,YAAY,wBAAwB,EACpC,aAAa,cAAc,OAAO;AAAA,EACrC,MAAM,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,UAAU,MAAM,sBAAsB,EACzC;AAAA,IACC,GAAG,uBAAuB;AAAA,EAC5B,EACC,aAAa,aAAa,CAAC;AAAA,EAC9B,SAAS,UAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,mBAAmB,IAAI;AAAA,EAC7G,yBAAyB,UAAU,MAAM,uBAAuB,EAAE;AAAA,IAChE,iDAAiD,mCAAmC;AAAA,EACtF;AAAA,EACA,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,16 +9,17 @@ const StyledPseudoBorder = styled("span")`
|
|
|
9
9
|
const pseudoBorder = css`
|
|
10
10
|
position: absolute;
|
|
11
11
|
border-style: solid;
|
|
12
|
-
border-width: ${({ size, buttonType }) => size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? "1px" : "2px"};
|
|
13
|
-
${(
|
|
14
|
-
|
|
12
|
+
border-width: ${({ $size, $buttonType }) => $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? "1px" : "2px"};
|
|
13
|
+
${(styledProps) => {
|
|
14
|
+
const { $buttonType, $shape, theme } = styledProps;
|
|
15
|
+
if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {
|
|
15
16
|
return `
|
|
16
17
|
top: 0;
|
|
17
18
|
left: 0;
|
|
18
19
|
width: 100%;
|
|
19
20
|
height: 100%;
|
|
20
21
|
border-color: ${theme.colors.neutral["000"]};
|
|
21
|
-
border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? "50%" : "0px"};
|
|
22
|
+
border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? "50%" : "0px"};
|
|
22
23
|
`;
|
|
23
24
|
}
|
|
24
25
|
return `
|
|
@@ -26,15 +27,15 @@ const pseudoBorder = css`
|
|
|
26
27
|
left: -1px;
|
|
27
28
|
width: calc(100% + 2px);
|
|
28
29
|
height: calc(100% + 2px);
|
|
29
|
-
border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? "50%" : "2px"};
|
|
30
|
+
border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? "50%" : "2px"};
|
|
30
31
|
`;
|
|
31
32
|
}}
|
|
32
33
|
`;
|
|
33
34
|
const fontSizeSettings = css`
|
|
34
|
-
${({ theme, size, buttonType }) => {
|
|
35
|
-
switch (size) {
|
|
35
|
+
${({ theme, $size, $buttonType }) => {
|
|
36
|
+
switch ($size) {
|
|
36
37
|
case BUTTON_SIZES.S:
|
|
37
|
-
if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;
|
|
38
|
+
if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;
|
|
38
39
|
return `font-size: ${theme.fontSizes.label[300]};`;
|
|
39
40
|
case BUTTON_SIZES.L:
|
|
40
41
|
return `
|
|
@@ -47,10 +48,7 @@ const fontSizeSettings = css`
|
|
|
47
48
|
}
|
|
48
49
|
}}
|
|
49
50
|
`;
|
|
50
|
-
const
|
|
51
|
-
name: DSButtonName,
|
|
52
|
-
slot: DSButtonSlots.ROOT
|
|
53
|
-
})`
|
|
51
|
+
const resetButtonStyles = css`
|
|
54
52
|
outline: none;
|
|
55
53
|
border: none;
|
|
56
54
|
background: transparent;
|
|
@@ -58,22 +56,26 @@ const RawButton = styled("button", {
|
|
|
58
56
|
background: transparent;
|
|
59
57
|
}
|
|
60
58
|
`;
|
|
61
|
-
const
|
|
59
|
+
const RawButton = styled("button", {
|
|
62
60
|
name: DSButtonName,
|
|
63
61
|
slot: DSButtonSlots.ROOT
|
|
64
62
|
})`
|
|
63
|
+
${resetButtonStyles}
|
|
64
|
+
`;
|
|
65
|
+
const defaultButtonStyles = css`
|
|
66
|
+
${resetButtonStyles}
|
|
65
67
|
display: inline-grid;
|
|
66
68
|
grid-gap: 0.615rem;
|
|
67
69
|
position: relative;
|
|
68
70
|
grid-auto-flow: column;
|
|
69
71
|
place-items: center;
|
|
70
|
-
align-items: ${({ buttonType, isV3 }) => isV3 === false || buttonType === BUTTON_TYPES.ICON || buttonType === BUTTON_TYPES.ICON_OUTLINE || buttonType === BUTTON_TYPES.ICON_FILLED ? "center" : "start"};
|
|
72
|
+
align-items: ${({ $buttonType, $isV3 }) => $isV3 === false || $buttonType === BUTTON_TYPES.ICON || $buttonType === BUTTON_TYPES.ICON_OUTLINE || $buttonType === BUTTON_TYPES.ICON_FILLED ? "center" : "start"};
|
|
71
73
|
justify-items: center;
|
|
72
74
|
width: fit-content;
|
|
73
75
|
cursor: pointer;
|
|
74
76
|
font-weight: 600;
|
|
75
|
-
${({ isV3, theme }) => {
|
|
76
|
-
if (isV3) {
|
|
77
|
+
${({ $isV3, theme }) => {
|
|
78
|
+
if ($isV3) {
|
|
77
79
|
return `
|
|
78
80
|
align-content: space-evenly;
|
|
79
81
|
text-align: left;
|
|
@@ -85,31 +87,41 @@ const DefaultButton = styled(RawButton, {
|
|
|
85
87
|
}
|
|
86
88
|
return "";
|
|
87
89
|
}}
|
|
88
|
-
padding: ${({ theme, buttonType, size, isV3 }) => buttonType === BUTTON_TYPES.ICON || buttonType === BUTTON_TYPES.ICON_OUTLINE || buttonType === BUTTON_TYPES.ICON_FILLED ? "0" : isV3 === false ? `0 ${theme.space.xs};` : size === BUTTON_SIZES.S ? `0.5px ${theme.space.xs} 0.5px` : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT) ? `2.5px ${theme.space.xs} 2.5px` : size === BUTTON_SIZES.M ? `2px ${theme.space.xs} 2px` : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT) ? `5.5px ${theme.space.xs} 5.5px` : `5px ${theme.space.xs} 5px`};
|
|
90
|
+
padding: ${({ theme, $buttonType, $size, $isV3 }) => $buttonType === BUTTON_TYPES.ICON || $buttonType === BUTTON_TYPES.ICON_OUTLINE || $buttonType === BUTTON_TYPES.ICON_FILLED ? "0" : $isV3 === false ? `0 ${theme.space.xs};` : $size === BUTTON_SIZES.S ? `0.5px ${theme.space.xs} 0.5px` : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT) ? `2.5px ${theme.space.xs} 2.5px` : $size === BUTTON_SIZES.M ? `2px ${theme.space.xs} 2px` : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT) ? `5.5px ${theme.space.xs} 5.5px` : `5px ${theme.space.xs} 5px`};
|
|
89
91
|
border-style: solid;
|
|
90
|
-
${({ size, isV3 }) => isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`}
|
|
91
|
-
min-width: ${({ size }) => mobileSizes[size]};
|
|
92
|
+
${({ $size, $isV3 }) => $isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`}
|
|
93
|
+
min-width: ${({ $size }) => mobileSizes[$size]};
|
|
92
94
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
93
|
-
${({ size, isV3 }) => isV3 ? `min-height: ${sizes[size]};` : `height: ${sizes[size]};`}
|
|
94
|
-
min-width: ${({ size }) => sizes[size]};
|
|
95
|
+
${({ $size, $isV3 }) => $isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`}
|
|
96
|
+
min-width: ${({ $size }) => sizes[$size]};
|
|
95
97
|
}
|
|
96
|
-
border-radius: ${(
|
|
98
|
+
border-radius: ${(styledProps) => {
|
|
99
|
+
const { $shape } = styledProps;
|
|
100
|
+
return $shape === BUTTON_SHAPES.DEFAULT ? "2px" : "50%";
|
|
101
|
+
}};
|
|
97
102
|
${fontSizeSettings}
|
|
98
|
-
${({ buttonType }) => buttonType === BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
|
|
103
|
+
${({ $buttonType }) => $buttonType === BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
|
|
99
104
|
&[aria-disabled='true'],
|
|
100
105
|
&[disabled] {
|
|
101
106
|
cursor: not-allowed;
|
|
102
107
|
}
|
|
103
108
|
${xStyledCommonProps}
|
|
104
109
|
`;
|
|
105
|
-
const
|
|
110
|
+
const DefaultButton = styled("button", {
|
|
111
|
+
name: DSButtonName,
|
|
112
|
+
slot: DSButtonSlots.ROOT
|
|
113
|
+
})`
|
|
114
|
+
${defaultButtonStyles}
|
|
115
|
+
`;
|
|
116
|
+
const FilledButton = styled("button", {
|
|
106
117
|
name: DSButtonName,
|
|
107
118
|
slot: DSButtonSlots.ROOT
|
|
108
119
|
})`
|
|
120
|
+
${defaultButtonStyles}
|
|
109
121
|
background-color: brand-600;
|
|
110
122
|
border-color: brand-600;
|
|
111
123
|
color: neutral-000;
|
|
112
|
-
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
124
|
+
border-width: ${({ $size }) => $size === "s" ? "1px;" : "2px"};
|
|
113
125
|
&:focus,
|
|
114
126
|
&[data-testemulatestate='focus'] {
|
|
115
127
|
border-color: brand-700;
|
|
@@ -166,10 +178,11 @@ const FilledButton = styled(DefaultButton, {
|
|
|
166
178
|
border-color: neutral-100;
|
|
167
179
|
}
|
|
168
180
|
`;
|
|
169
|
-
const OutlineButton = styled(
|
|
181
|
+
const OutlineButton = styled("button", {
|
|
170
182
|
name: DSButtonName,
|
|
171
183
|
slot: DSButtonSlots.ROOT
|
|
172
184
|
})`
|
|
185
|
+
${defaultButtonStyles}
|
|
173
186
|
background: neutral-000;
|
|
174
187
|
border-color: neutral-400;
|
|
175
188
|
color: brand-600;
|
|
@@ -212,10 +225,11 @@ const OutlineButton = styled(DefaultButton, {
|
|
|
212
225
|
border-color: brand-700;
|
|
213
226
|
}
|
|
214
227
|
`;
|
|
215
|
-
const TextButton = styled(
|
|
228
|
+
const TextButton = styled("button", {
|
|
216
229
|
name: DSButtonName,
|
|
217
230
|
slot: DSButtonSlots.ROOT
|
|
218
231
|
})`
|
|
232
|
+
${defaultButtonStyles}
|
|
219
233
|
border-color: transparent;
|
|
220
234
|
background-color: transparent;
|
|
221
235
|
border-width: 1px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,eAAe,cAAc,cAAc,aAAa,aAAa;AAC9E,SAAS,cAAc,qBAAqB;AAUrC,MAAM,qBAAqB,OAAO,MAAM;AAAA;AAAA;AAAA;AAK/C,MAAM,eAAe;AAAA;AAAA;AAAA,kBAGH,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n $size: DSButtonT.ButtonSizesT;\n $buttonType: DSButtonT.ButtonTypesT;\n $shape: DSButtonT.ButtonShapesT;\n $isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ $size, $buttonType }) =>\n $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\n if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, $size, $buttonType }) => {\n switch ($size) {\n case BUTTON_SIZES.S:\n if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ $buttonType, $isV3 }) =>\n $isV3 === false ||\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ $isV3, theme }) => {\n if ($isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, $buttonType, $size, $isV3 }) =>\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : $isV3 === false\n ? `0 ${theme.space.xs};`\n : $size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : $size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`)}\n min-width: ${({ $size }) => mobileSizes[$size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`)}\n min-width: ${({ $size }) => sizes[$size]};\n }\n border-radius: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\n ${fontSizeSettings}\n ${({ $buttonType }) => ($buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ $size }) => ($size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,12 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
|
|
3
3
|
import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
4
4
|
import type { DSButtonT } from '../react-desc-prop-types.js';
|
|
5
|
-
import { useButtonRenderer } from './useButtonRenderer.js';
|
|
6
5
|
export interface ButtonV2Configuration {
|
|
7
6
|
propsWithDefault: DSButtonT.InternalProps;
|
|
8
7
|
globalProps: ReturnType<typeof useGetGlobalAttributes>;
|
|
9
8
|
xstyledProps: ReturnType<typeof useGetXstyledProps>;
|
|
10
|
-
ButtonRenderer: ReturnType<typeof useButtonRenderer>;
|
|
11
9
|
handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
|
|
12
10
|
tabIndex?: TypescriptHelpersT.WCAGTabIndex;
|
|
13
11
|
handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
@@ -30,6 +30,11 @@ export declare namespace DSButtonT {
|
|
|
30
30
|
}
|
|
31
31
|
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps, RequiredProps {
|
|
32
32
|
}
|
|
33
|
+
interface StyledButtonInheritedDrilledProps extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps {
|
|
34
|
+
type: DefaultProps['type'];
|
|
35
|
+
innerRef?: OptionalProps['innerRef'];
|
|
36
|
+
onClick: DefaultProps['onClick'];
|
|
37
|
+
}
|
|
33
38
|
}
|
|
34
39
|
export declare const defaultProps: DSButtonT.DefaultProps;
|
|
35
40
|
export declare const DSButtonPropTypes: ValidationMap<unknown>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { DSButtonT } from './react-desc-prop-types.js';
|
|
2
2
|
export interface StyledButtonPropsT {
|
|
3
|
-
size: DSButtonT.ButtonSizesT;
|
|
4
|
-
buttonType: DSButtonT.ButtonTypesT;
|
|
5
|
-
shape: DSButtonT.ButtonShapesT;
|
|
6
|
-
isV3: DSButtonT.RequiredProps['isV3'];
|
|
3
|
+
$size: DSButtonT.ButtonSizesT;
|
|
4
|
+
$buttonType: DSButtonT.ButtonTypesT;
|
|
5
|
+
$shape: DSButtonT.ButtonShapesT;
|
|
6
|
+
$isV3: DSButtonT.RequiredProps['isV3'];
|
|
7
7
|
}
|
|
8
8
|
export declare const StyledPseudoBorder: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
9
|
-
export declare const RawButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme,
|
|
10
|
-
export declare const DefaultButton: import("styled-components").StyledComponent<
|
|
11
|
-
export declare const FilledButton: import("styled-components").StyledComponent<
|
|
12
|
-
export declare const OutlineButton: import("styled-components").StyledComponent<
|
|
13
|
-
export declare const TextButton: import("styled-components").StyledComponent<
|
|
9
|
+
export declare const RawButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
|
10
|
+
export declare const DefaultButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
|
11
|
+
export declare const FilledButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
|
12
|
+
export declare const OutlineButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
|
13
|
+
export declare const TextButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.40",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Button",
|
|
6
6
|
"files": [
|
|
@@ -35,35 +35,33 @@
|
|
|
35
35
|
"reportFile": "tests.xml",
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
|
-
"scripts": {
|
|
39
|
-
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
40
|
-
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
41
|
-
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
42
|
-
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
43
|
-
"dts": "node ../../../scripts/dts.mjs",
|
|
44
|
-
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
45
|
-
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
46
|
-
},
|
|
47
38
|
"dependencies": {
|
|
48
|
-
"@elliemae/ds-props-helpers": "3.60.0-next.
|
|
49
|
-
"@elliemae/ds-system": "3.60.0-next.
|
|
50
|
-
"@elliemae/ds-typescript-helpers": "3.60.0-next.
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.40",
|
|
40
|
+
"@elliemae/ds-system": "3.60.0-next.40",
|
|
41
|
+
"@elliemae/ds-typescript-helpers": "3.60.0-next.40"
|
|
51
42
|
},
|
|
52
43
|
"devDependencies": {
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"@elliemae/
|
|
56
|
-
"
|
|
57
|
-
"styled-components": "catalog:"
|
|
44
|
+
"jest": "^30.0.0",
|
|
45
|
+
"styled-components": "~5.3.9",
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.40",
|
|
47
|
+
"@elliemae/ds-test-utils": "3.60.0-next.40"
|
|
58
48
|
},
|
|
59
49
|
"peerDependencies": {
|
|
60
|
-
"react": "
|
|
61
|
-
"react-dom": "
|
|
62
|
-
"styled-components": "
|
|
50
|
+
"react": "^18.3.1",
|
|
51
|
+
"react-dom": "^18.3.1",
|
|
52
|
+
"styled-components": "~5.3.9"
|
|
63
53
|
},
|
|
64
54
|
"publishConfig": {
|
|
65
55
|
"access": "public",
|
|
66
56
|
"typeSafety": true
|
|
67
57
|
},
|
|
68
|
-
"
|
|
69
|
-
|
|
58
|
+
"scripts": {
|
|
59
|
+
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
60
|
+
"test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
|
|
61
|
+
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
62
|
+
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
63
|
+
"dts": "node ../../../scripts/dts.mjs",
|
|
64
|
+
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
65
|
+
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var useButtonRenderer_exports = {};
|
|
30
|
-
__export(useButtonRenderer_exports, {
|
|
31
|
-
useButtonRenderer: () => useButtonRenderer
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(useButtonRenderer_exports);
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_styles = require("../styles.js");
|
|
37
|
-
const buttonMap = {
|
|
38
|
-
filled: import_styles.FilledButton,
|
|
39
|
-
iconFilled: import_styles.FilledButton,
|
|
40
|
-
outline: import_styles.OutlineButton,
|
|
41
|
-
iconOutline: import_styles.OutlineButton,
|
|
42
|
-
text: import_styles.TextButton,
|
|
43
|
-
icon: import_styles.TextButton,
|
|
44
|
-
raw: import_styles.RawButton
|
|
45
|
-
};
|
|
46
|
-
const useButtonRenderer = (propsWithDefault) => {
|
|
47
|
-
const { buttonType } = propsWithDefault;
|
|
48
|
-
return import_react.default.useMemo(() => buttonMap[buttonType] || import_styles.DefaultButton, [buttonType]);
|
|
49
|
-
};
|
|
50
|
-
//# sourceMappingURL=useButtonRenderer.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/parts/SharedButtonBaseline/config/useButtonRenderer.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from '../styles.js';\n\nconst buttonMap = {\n filled: FilledButton,\n iconFilled: FilledButton,\n outline: OutlineButton,\n iconOutline: OutlineButton,\n text: TextButton,\n icon: TextButton,\n raw: RawButton,\n} as const;\n\nexport const useButtonRenderer = (propsWithDefault: DSButtonT.InternalProps) => {\n const { buttonType } = propsWithDefault;\n return React.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,oBAAkF;AAElF,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,oBAAoB,CAAC,qBAA8C;AAC9E,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,aAAAA,QAAM,QAAQ,MAAM,UAAU,UAAU,KAAK,6BAAe,CAAC,UAAU,CAAC;AACjF;",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from "../styles.js";
|
|
4
|
-
const buttonMap = {
|
|
5
|
-
filled: FilledButton,
|
|
6
|
-
iconFilled: FilledButton,
|
|
7
|
-
outline: OutlineButton,
|
|
8
|
-
iconOutline: OutlineButton,
|
|
9
|
-
text: TextButton,
|
|
10
|
-
icon: TextButton,
|
|
11
|
-
raw: RawButton
|
|
12
|
-
};
|
|
13
|
-
const useButtonRenderer = (propsWithDefault) => {
|
|
14
|
-
const { buttonType } = propsWithDefault;
|
|
15
|
-
return React2.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
useButtonRenderer
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=useButtonRenderer.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/SharedButtonBaseline/config/useButtonRenderer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from '../styles.js';\n\nconst buttonMap = {\n filled: FilledButton,\n iconFilled: FilledButton,\n outline: OutlineButton,\n iconOutline: OutlineButton,\n text: TextButton,\n icon: TextButton,\n raw: RawButton,\n} as const;\n\nexport const useButtonRenderer = (propsWithDefault: DSButtonT.InternalProps) => {\n const { buttonType } = propsWithDefault;\n return React.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,eAAe,WAAW,cAAc,eAAe,kBAAkB;AAElF,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,oBAAoB,CAAC,qBAA8C;AAC9E,QAAM,EAAE,WAAW,IAAI;AACvB,SAAOA,OAAM,QAAQ,MAAM,UAAU,UAAU,KAAK,eAAe,CAAC,UAAU,CAAC;AACjF;",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import type { DSButtonT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const useButtonRenderer: (propsWithDefault: DSButtonT.InternalProps) => import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never> | import("styled-components").StyledComponent<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>, import("@elliemae/ds-system").Theme, import("../styles.js").StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>>, never>;
|