@elliemae/ds-button-v2 3.70.0-next.7 → 3.70.0-next.71
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/index.js +3 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/DSButtonV2/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSButtonV3/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/DSButton.js +3 -3
- package/dist/cjs/parts/SharedButtonBaseline/DSButton.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js +5 -5
- package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js +5 -1
- package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/styles.js +10 -0
- package/dist/cjs/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-button-v3-valid.js +3 -1
- package/dist/cjs/typescript-testing/typescript-button-v3-valid.js.map +2 -2
- package/dist/esm/index.js +3 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/DSButtonV2/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSButtonV3/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/DSButton.js +3 -3
- package/dist/esm/parts/SharedButtonBaseline/DSButton.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/config/useButton.js +5 -5
- package/dist/esm/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js +5 -1
- package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/styles.js +10 -0
- package/dist/esm/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-button-v3-valid.js +3 -1
- package/dist/esm/typescript-testing/typescript-button-v3-valid.js.map +2 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/parts/SharedButtonBaseline/react-desc-prop-types.d.ts +1 -0
- package/package.json +11 -10
- package/dist/types/tests/DSButtonV3.test.d.ts +0 -1
- package/dist/types/tests/DSButtonV3.type-submit-with-form.test.d.ts +0 -1
- package/dist/types/tests/a11y/apply-aria-disabled.test.d.ts +0 -1
- package/dist/types/tests/a11y/icon-axe.test.d.ts +0 -1
- package/dist/types/tests/a11y/text-axe.test.d.ts +0 -1
- package/dist/types/tests/a11y/toggle-axe.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-button-v3-valid.d.ts +0 -1
package/dist/cjs/index.js
CHANGED
|
@@ -40,7 +40,8 @@ __export(index_exports, {
|
|
|
40
40
|
DSButtonV3DefaultProps: () => import_react_desc_prop_types.defaultProps,
|
|
41
41
|
DSButtonV3PropTypes: () => import_DSButtonV3.DSButtonV3PropTypes,
|
|
42
42
|
DSButtonV3PropTypesSchema: () => import_DSButtonV3.DSButtonV3PropTypesSchema,
|
|
43
|
-
DSButtonV3WithSchema: () => import_DSButtonV3.DSButtonV3WithSchema
|
|
43
|
+
DSButtonV3WithSchema: () => import_DSButtonV3.DSButtonV3WithSchema,
|
|
44
|
+
DSButtonWithSchema: () => import_SharedButtonBaseline.DSButtonWithSchema
|
|
44
45
|
});
|
|
45
46
|
module.exports = __toCommonJS(index_exports);
|
|
46
47
|
var React = __toESM(require("react"));
|
|
@@ -49,4 +50,5 @@ var import_DSButtonV2 = require("./parts/DSButtonV2/index.js");
|
|
|
49
50
|
var import_DSButtonV3 = require("./parts/DSButtonV3/index.js");
|
|
50
51
|
var import_react_desc_prop_types = require("./parts/SharedButtonBaseline/react-desc-prop-types.js");
|
|
51
52
|
var import_DSButtonDefinitions = require("./parts/SharedButtonBaseline/DSButtonDefinitions.js");
|
|
53
|
+
var import_SharedButtonBaseline = require("./parts/SharedButtonBaseline/index.js");
|
|
52
54
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport {\n DSButtonV3,\n DSButtonV3WithSchema,\n DSButtonV3PropTypes,\n DSButtonV3PropTypesSchema,\n type DSButtonV3T,\n} from './parts/DSButtonV3/index.js';\nexport {\n type DSButtonT,\n defaultProps as DSButtonV3DefaultProps,\n} from './parts/SharedButtonBaseline/react-desc-prop-types.js';\nexport { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/SharedButtonBaseline/DSButtonDefinitions.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0D;AAC1D,wBAAmE;AACnE,wBAMO;AACP,mCAGO;AACP,iCAAgE;",
|
|
4
|
+
"sourcesContent": ["export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport {\n DSButtonV3,\n DSButtonV3WithSchema,\n DSButtonV3PropTypes,\n DSButtonV3PropTypesSchema,\n type DSButtonV3T,\n} from './parts/DSButtonV3/index.js';\nexport {\n type DSButtonT,\n defaultProps as DSButtonV3DefaultProps,\n} from './parts/SharedButtonBaseline/react-desc-prop-types.js';\nexport { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/SharedButtonBaseline/DSButtonDefinitions.js';\nexport { DSButtonWithSchema } from './parts/SharedButtonBaseline/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0D;AAC1D,wBAAmE;AACnE,wBAMO;AACP,mCAGO;AACP,iCAAgE;AAChE,kCAAmC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButtonV2/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n 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\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV2PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV2DataTestId.ROOT),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,kDAAqB,IAAI;AACjH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButtonV3/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n 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\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV3PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV3DataTestId.ROOT),\n} as DSPropTypesSchema<DSButtonV3T.Props>;\n\nexport const DSButtonV3PropTypesSchema = DSButtonV3PropTypes as unknown as ValidationMap<DSButtonV3T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,kDAAqB,IAAI;AACjH;AAEO,MAAM,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,13 +54,13 @@ const ButtonRenderer = (unsanitizedProps) => {
|
|
|
54
54
|
};
|
|
55
55
|
const DSButton = (props) => {
|
|
56
56
|
const { propsWithDefault, tabIndex, handleOnMouseDown, globalProps, xstyledProps, handleOnKeyDown, handleOnClick } = (0, import_useButton.useButton)(props);
|
|
57
|
-
const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled,
|
|
57
|
+
const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled, readOnly, shape } = propsWithDefault;
|
|
58
58
|
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
|
|
59
|
-
const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;
|
|
59
|
+
const { shape: removedShapeGlobal, readOnly: removedReadOnlyGlobal, ...propsWithoutReusedGlobals } = globalProps;
|
|
60
60
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
61
61
|
ButtonRenderer,
|
|
62
62
|
{
|
|
63
|
-
"aria-disabled": applyAriaDisabled ||
|
|
63
|
+
"aria-disabled": applyAriaDisabled || readOnly ? true : void 0,
|
|
64
64
|
...propsWithoutReusedGlobals,
|
|
65
65
|
...xstyledProps,
|
|
66
66
|
...ownerPropsConfig,
|
|
@@ -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 { 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,
|
|
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;
|
|
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, readOnly, shape } = propsWithDefault;\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n const { shape: removedShapeGlobal, readOnly: removedReadOnlyGlobal, ...propsWithoutReusedGlobals } = globalProps;\n\n return (\n <ButtonRenderer\n aria-disabled={applyAriaDisabled || readOnly ? true : undefined}\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,UAAU,uBAAuB,GAAG,0BAA0B,IAAI;AAErG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,qBAAqB,WAAW,OAAO;AAAA,MACrD,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
|
}
|
|
@@ -42,12 +42,12 @@ const useButton = (props) => {
|
|
|
42
42
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
43
43
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
44
44
|
const { disabled } = globalProps;
|
|
45
|
-
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;
|
|
45
|
+
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, readOnly, type } = propsWithDefault;
|
|
46
46
|
const standardizedType = String(type).toLowerCase();
|
|
47
47
|
const handleOnKeyDown = import_react.default.useCallback(
|
|
48
48
|
(e) => {
|
|
49
49
|
const { key } = e;
|
|
50
|
-
if (["Space", " ", "Enter"].includes(key) && (disabled || applyAriaDisabled)) {
|
|
50
|
+
if (["Space", " ", "Enter"].includes(key) && (disabled || applyAriaDisabled || readOnly)) {
|
|
51
51
|
e.preventDefault();
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
@@ -57,16 +57,16 @@ const useButton = (props) => {
|
|
|
57
57
|
onClick(e);
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
|
-
[disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick]
|
|
60
|
+
[disabled, applyAriaDisabled, readOnly, onKeyDown, standardizedType, onClick]
|
|
61
61
|
);
|
|
62
62
|
const handleOnClick = import_react.default.useCallback(
|
|
63
63
|
(e) => {
|
|
64
|
-
if (disabled || applyAriaDisabled) {
|
|
64
|
+
if (disabled || applyAriaDisabled || readOnly) {
|
|
65
65
|
return;
|
|
66
66
|
}
|
|
67
67
|
onClick?.(e);
|
|
68
68
|
},
|
|
69
|
-
[disabled, applyAriaDisabled, onClick]
|
|
69
|
+
[disabled, applyAriaDisabled, readOnly, onClick]
|
|
70
70
|
);
|
|
71
71
|
const handleOnMouseDown = import_react.default.useCallback(
|
|
72
72
|
(e) => {
|
|
@@ -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';\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;
|
|
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, readOnly, 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 || readOnly)) {\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, readOnly, onKeyDown, standardizedType, onClick],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled || readOnly) {\n return;\n }\n\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, readOnly, 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,UAAU,KAAK,IAAI;AAG/E,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,qBAAqB,WAAW;AACxF,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,UAAU,WAAW,kBAAkB,OAAO;AAAA,EAC9E;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,qBAAqB,UAAU;AAC7C;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,OAAO;AAAA,EACjD;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
|
}
|
|
@@ -44,7 +44,8 @@ const defaultProps = {
|
|
|
44
44
|
type: "button",
|
|
45
45
|
onClick: () => {
|
|
46
46
|
},
|
|
47
|
-
applyAriaDisabled: false
|
|
47
|
+
applyAriaDisabled: false,
|
|
48
|
+
readOnly: false
|
|
48
49
|
};
|
|
49
50
|
const DSButtonPropTypes = {
|
|
50
51
|
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_DSButtonDefinitions.DSButtonName, import_DSButtonDefinitions.DSButtonSlots),
|
|
@@ -68,6 +69,9 @@ const DSButtonPropTypes = {
|
|
|
68
69
|
),
|
|
69
70
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
70
71
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
72
|
+
).defaultValue(false),
|
|
73
|
+
readOnly: import_ds_props_helpers.PropTypes.bool.description(
|
|
74
|
+
'Focusable-but-locked state. Emits aria-disabled="true" (buttons are not valid hosts for readonly/aria-readonly, so neither is rendered) and prevents the main action, mirroring applyAriaDisabled. CAN STILL RECEIVE FOCUS.'
|
|
71
75
|
).defaultValue(false)
|
|
72
76
|
};
|
|
73
77
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -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
|
|
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 readOnly: boolean;\n }\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSButtonName,\n typeof DSButtonSlots\n > {\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\n 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\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends\n 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 readOnly: 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 readOnly: PropTypes.bool\n .description(\n 'Focusable-but-locked state. Emits aria-disabled=\"true\" (buttons are not valid hosts for readonly/aria-readonly, so neither is rendered) and prevents the main action, mirroring applyAriaDisabled. CAN STILL RECEIVE FOCUS.',\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;AA4DzD,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;AAAA,EACnB,UAAU;AACZ;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;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,8 +38,12 @@ __export(styles_exports, {
|
|
|
38
38
|
module.exports = __toCommonJS(styles_exports);
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
41
42
|
var import_constants = require("../../constants.js");
|
|
42
43
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
44
|
+
const typographyBase = import_ds_system.css`
|
|
45
|
+
${({ $isV3 }) => $isV3 ? import_ds_typography.typographyFontFamily : ""}
|
|
46
|
+
`;
|
|
43
47
|
const StyledPseudoBorder = (0, import_ds_system.styled)("span")`
|
|
44
48
|
display: none;
|
|
45
49
|
position: absolute;
|
|
@@ -102,6 +106,12 @@ const RawButton = (0, import_ds_system.styled)("button", {
|
|
|
102
106
|
`;
|
|
103
107
|
const defaultButtonStyles = import_ds_system.css`
|
|
104
108
|
${resetButtonStyles}
|
|
109
|
+
// Apply the shared font-family (PUI-18721) as the text styling base for V3
|
|
110
|
+
// buttons. font-weight (below), font-size (fontSizeSettings), and line-height
|
|
111
|
+
// (below) are declared AFTER this and win the cascade unconditionally, so
|
|
112
|
+
// button height/line-height/font-size/font-weight are all unaffected —
|
|
113
|
+
// only font-family changes.
|
|
114
|
+
${typographyBase}
|
|
105
115
|
display: inline-grid;
|
|
106
116
|
grid-gap: 0.615rem;
|
|
107
117
|
position: relative;
|
|
@@ -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 ${(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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAgD;AAChD,uBAA8E;AAC9E,iCAA4C;
|
|
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 { typographyFontFamily } from '@elliemae/ds-typography';\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\n// PUI-18721 / PUI-18210 follow-up: only font-family is taken from the shared\n// typography tokens here, scoped to V3 only (V2 never set font-family \u2014 applying\n// it there would be a visible change). Per-size font-weight/line-height\n// (b3/b1/h4-strong per the Button [Filled Variant] design spec v3.0.0) are\n// intentionally deferred to a future iteration \u2014 this fix keeps font-weight,\n// line-height, and font-size exactly as they were for every size.\nconst typographyBase = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? typographyFontFamily : '')}\n`;\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 // Apply the shared font-family (PUI-18721) as the text styling base for V3\n // buttons. font-weight (below), font-size (fontSizeSettings), and line-height\n // (below) are declared AFTER this and win the cascade unconditionally, so\n // button height/line-height/font-size/font-weight are all unaffected \u2014\n // only font-family changes.\n ${typographyBase}\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
|
}
|
|
@@ -54,7 +54,8 @@ const testCompleteDefaults = {
|
|
|
54
54
|
buttonType: "filled",
|
|
55
55
|
onClick: () => null,
|
|
56
56
|
shape: "default",
|
|
57
|
-
applyAriaDisabled: false
|
|
57
|
+
applyAriaDisabled: false,
|
|
58
|
+
readOnly: false
|
|
58
59
|
};
|
|
59
60
|
const testInternalProps = {
|
|
60
61
|
...testRequiredProps,
|
|
@@ -114,6 +115,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
|
|
|
114
115
|
shape: "default",
|
|
115
116
|
innerRef: ref,
|
|
116
117
|
applyAriaDisabled: false,
|
|
118
|
+
readOnly: false,
|
|
117
119
|
children: "Button Label"
|
|
118
120
|
}
|
|
119
121
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-button-v3-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSButtonV3 } from '../index.js';\nimport type { DSButtonV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSButtonV3T.Props;\ntype ComponentPropsInternals = DSButtonV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSButtonV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSButtonV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSButtonV3T.RequiredProps;\n\nconst ref = createRef<HTMLButtonElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n buttonType: 'filled',\n onClick: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n applyAriaDisabled: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSButtonV3 {...testExplicitDefinition} />\n <DSButtonV3 {...testInferedTypeCompatibility} />\n <DSButtonV3 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSButtonV3\n data-testid=\"ds-button\"\n size=\"m\"\n type=\"button\"\n buttonType=\"filled\"\n onClick={() => null}\n shape=\"default\"\n innerRef={ref}\n applyAriaDisabled={false}\n >\n Button Label\n </DSButtonV3>\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSButtonV3 } from '../index.js';\nimport type { DSButtonV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSButtonV3T.Props;\ntype ComponentPropsInternals = DSButtonV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSButtonV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSButtonV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSButtonV3T.RequiredProps;\n\nconst ref = createRef<HTMLButtonElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n buttonType: 'filled',\n onClick: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSButtonV3 {...testExplicitDefinition} />\n <DSButtonV3 {...testInferedTypeCompatibility} />\n <DSButtonV3 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSButtonV3\n data-testid=\"ds-button\"\n size=\"m\"\n type=\"button\"\n buttonType=\"filled\"\n onClick={() => null}\n shape=\"default\"\n innerRef={ref}\n applyAriaDisabled={false}\n readOnly={false}\n >\n Button Label\n </DSButtonV3>\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACwGrB;AAvGF,mBAA0B;AAC1B,eAA2B;AAU3B,MAAM,UAAM,wBAA6B;AAEzC,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AAIA,MAAM,sBAA2D;AAAA,EAC/D,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,SAAS,MAAM;AACjB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAGA,MAAM,+BAA+B;AAAA,EACnC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AAAA,MACf,OAAM;AAAA,MACN,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
defaultProps
|
|
12
12
|
} from "./parts/SharedButtonBaseline/react-desc-prop-types.js";
|
|
13
13
|
import { DSButtonName, DSButtonSlots, DSButtonDataTestId } from "./parts/SharedButtonBaseline/DSButtonDefinitions.js";
|
|
14
|
+
import { DSButtonWithSchema } from "./parts/SharedButtonBaseline/index.js";
|
|
14
15
|
export {
|
|
15
16
|
BUTTON_SHAPES,
|
|
16
17
|
BUTTON_SIZES,
|
|
@@ -24,6 +25,7 @@ export {
|
|
|
24
25
|
defaultProps as DSButtonV3DefaultProps,
|
|
25
26
|
DSButtonV3PropTypes,
|
|
26
27
|
DSButtonV3PropTypesSchema,
|
|
27
|
-
DSButtonV3WithSchema
|
|
28
|
+
DSButtonV3WithSchema,
|
|
29
|
+
DSButtonWithSchema
|
|
28
30
|
};
|
|
29
31
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport {\n DSButtonV3,\n DSButtonV3WithSchema,\n DSButtonV3PropTypes,\n DSButtonV3PropTypesSchema,\n type DSButtonV3T,\n} from './parts/DSButtonV3/index.js';\nexport {\n type DSButtonT,\n defaultProps as DSButtonV3DefaultProps,\n} from './parts/SharedButtonBaseline/react-desc-prop-types.js';\nexport { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/SharedButtonBaseline/DSButtonDefinitions.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,cAAc,qBAAqB;AAC1D,SAAS,YAAY,4BAA8C;AACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EAEkB;AAAA,OACX;AACP,SAAS,cAAc,eAAe,0BAA0B;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport {\n DSButtonV3,\n DSButtonV3WithSchema,\n DSButtonV3PropTypes,\n DSButtonV3PropTypesSchema,\n type DSButtonV3T,\n} from './parts/DSButtonV3/index.js';\nexport {\n type DSButtonT,\n defaultProps as DSButtonV3DefaultProps,\n} from './parts/SharedButtonBaseline/react-desc-prop-types.js';\nexport { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/SharedButtonBaseline/DSButtonDefinitions.js';\nexport { DSButtonWithSchema } from './parts/SharedButtonBaseline/index.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,cAAc,qBAAqB;AAC1D,SAAS,YAAY,4BAA8C;AACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EAEkB;AAAA,OACX;AACP,SAAS,cAAc,eAAe,0BAA0B;AAChE,SAAS,0BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButtonV2/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n 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\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV2PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV2DataTestId.ROOT),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,qBAAqB,IAAI;AACjH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButtonV3/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n 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\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV3PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV3DataTestId.ROOT),\n} as DSPropTypesSchema<DSButtonV3T.Props>;\n\nexport const DSButtonV3PropTypesSchema = DSButtonV3PropTypes as unknown as ValidationMap<DSButtonV3T.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,qBAAqB,IAAI;AACjH;AAEO,MAAM,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,13 +20,13 @@ const ButtonRenderer = (unsanitizedProps) => {
|
|
|
20
20
|
};
|
|
21
21
|
const DSButton = (props) => {
|
|
22
22
|
const { propsWithDefault, tabIndex, handleOnMouseDown, globalProps, xstyledProps, handleOnKeyDown, handleOnClick } = useButton(props);
|
|
23
|
-
const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled,
|
|
23
|
+
const { size, buttonType, innerRef, children, type, isV3, applyAriaDisabled, readOnly, shape } = propsWithDefault;
|
|
24
24
|
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
25
|
-
const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;
|
|
25
|
+
const { shape: removedShapeGlobal, readOnly: removedReadOnlyGlobal, ...propsWithoutReusedGlobals } = globalProps;
|
|
26
26
|
return /* @__PURE__ */ jsxs(
|
|
27
27
|
ButtonRenderer,
|
|
28
28
|
{
|
|
29
|
-
"aria-disabled": applyAriaDisabled ||
|
|
29
|
+
"aria-disabled": applyAriaDisabled || readOnly ? true : void 0,
|
|
30
30
|
...propsWithoutReusedGlobals,
|
|
31
31
|
...xstyledProps,
|
|
32
32
|
...ownerPropsConfig,
|
|
@@ -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 { 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,
|
|
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;
|
|
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, readOnly, shape } = propsWithDefault;\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n const { shape: removedShapeGlobal, readOnly: removedReadOnlyGlobal, ...propsWithoutReusedGlobals } = globalProps;\n\n return (\n <ButtonRenderer\n aria-disabled={applyAriaDisabled || readOnly ? true : undefined}\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,UAAU,uBAAuB,GAAG,0BAA0B,IAAI;AAErG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,qBAAqB,WAAW,OAAO;AAAA,MACrD,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
|
}
|
|
@@ -9,12 +9,12 @@ const useButton = (props) => {
|
|
|
9
9
|
const globalProps = useGetGlobalAttributes(propsWithDefault);
|
|
10
10
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
11
11
|
const { disabled } = globalProps;
|
|
12
|
-
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;
|
|
12
|
+
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, readOnly, type } = propsWithDefault;
|
|
13
13
|
const standardizedType = String(type).toLowerCase();
|
|
14
14
|
const handleOnKeyDown = React2.useCallback(
|
|
15
15
|
(e) => {
|
|
16
16
|
const { key } = e;
|
|
17
|
-
if (["Space", " ", "Enter"].includes(key) && (disabled || applyAriaDisabled)) {
|
|
17
|
+
if (["Space", " ", "Enter"].includes(key) && (disabled || applyAriaDisabled || readOnly)) {
|
|
18
18
|
e.preventDefault();
|
|
19
19
|
return;
|
|
20
20
|
}
|
|
@@ -24,16 +24,16 @@ const useButton = (props) => {
|
|
|
24
24
|
onClick(e);
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
-
[disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick]
|
|
27
|
+
[disabled, applyAriaDisabled, readOnly, onKeyDown, standardizedType, onClick]
|
|
28
28
|
);
|
|
29
29
|
const handleOnClick = React2.useCallback(
|
|
30
30
|
(e) => {
|
|
31
|
-
if (disabled || applyAriaDisabled) {
|
|
31
|
+
if (disabled || applyAriaDisabled || readOnly) {
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
34
|
onClick?.(e);
|
|
35
35
|
},
|
|
36
|
-
[disabled, applyAriaDisabled, onClick]
|
|
36
|
+
[disabled, applyAriaDisabled, readOnly, onClick]
|
|
37
37
|
);
|
|
38
38
|
const handleOnMouseDown = React2.useCallback(
|
|
39
39
|
(e) => {
|
|
@@ -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';\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;
|
|
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, readOnly, 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 || readOnly)) {\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, readOnly, onKeyDown, standardizedType, onClick],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled || readOnly) {\n return;\n }\n\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, readOnly, 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,UAAU,KAAK,IAAI;AAG/E,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,qBAAqB,WAAW;AACxF,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,UAAU,WAAW,kBAAkB,OAAO;AAAA,EAC9E;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,qBAAqB,UAAU;AAC7C;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,OAAO;AAAA,EACjD;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
|
}
|
|
@@ -27,7 +27,8 @@ const defaultProps = {
|
|
|
27
27
|
type: "button",
|
|
28
28
|
onClick: () => {
|
|
29
29
|
},
|
|
30
|
-
applyAriaDisabled: false
|
|
30
|
+
applyAriaDisabled: false,
|
|
31
|
+
readOnly: false
|
|
31
32
|
};
|
|
32
33
|
const DSButtonPropTypes = {
|
|
33
34
|
...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),
|
|
@@ -51,6 +52,9 @@ const DSButtonPropTypes = {
|
|
|
51
52
|
),
|
|
52
53
|
applyAriaDisabled: PropTypes.bool.description(
|
|
53
54
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
55
|
+
).defaultValue(false),
|
|
56
|
+
readOnly: PropTypes.bool.description(
|
|
57
|
+
'Focusable-but-locked state. Emits aria-disabled="true" (buttons are not valid hosts for readonly/aria-readonly, so neither is rendered) and prevents the main action, mirroring applyAriaDisabled. CAN STILL RECEIVE FOCUS.'
|
|
54
58
|
).defaultValue(false)
|
|
55
59
|
};
|
|
56
60
|
export {
|
|
@@ -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
|
|
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 readOnly: boolean;\n }\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSButtonName,\n typeof DSButtonSlots\n > {\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\n 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\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends\n 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 readOnly: 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 readOnly: PropTypes.bool\n .description(\n 'Focusable-but-locked state. Emits aria-disabled=\"true\" (buttons are not valid hosts for readonly/aria-readonly, so neither is rendered) and prevents the main action, mirroring applyAriaDisabled. CAN STILL RECEIVE FOCUS.',\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;AA4DzD,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;AAAA,EACnB,UAAU;AACZ;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;AAAA,EACrB,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
+
import { typographyFontFamily } from "@elliemae/ds-typography";
|
|
3
4
|
import { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from "../../constants.js";
|
|
4
5
|
import { DSButtonName, DSButtonSlots } from "./DSButtonDefinitions.js";
|
|
6
|
+
const typographyBase = css`
|
|
7
|
+
${({ $isV3 }) => $isV3 ? typographyFontFamily : ""}
|
|
8
|
+
`;
|
|
5
9
|
const StyledPseudoBorder = styled("span")`
|
|
6
10
|
display: none;
|
|
7
11
|
position: absolute;
|
|
@@ -64,6 +68,12 @@ const RawButton = styled("button", {
|
|
|
64
68
|
`;
|
|
65
69
|
const defaultButtonStyles = css`
|
|
66
70
|
${resetButtonStyles}
|
|
71
|
+
// Apply the shared font-family (PUI-18721) as the text styling base for V3
|
|
72
|
+
// buttons. font-weight (below), font-size (fontSizeSettings), and line-height
|
|
73
|
+
// (below) are declared AFTER this and win the cascade unconditionally, so
|
|
74
|
+
// button height/line-height/font-size/font-weight are all unaffected —
|
|
75
|
+
// only font-family changes.
|
|
76
|
+
${typographyBase}
|
|
67
77
|
display: inline-grid;
|
|
68
78
|
grid-gap: 0.615rem;
|
|
69
79
|
position: relative;
|
|
@@ -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 ${(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": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,eAAe,cAAc,cAAc,aAAa,aAAa;AAC9E,SAAS,cAAc,qBAAqB;
|
|
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 { typographyFontFamily } from '@elliemae/ds-typography';\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\n// PUI-18721 / PUI-18210 follow-up: only font-family is taken from the shared\n// typography tokens here, scoped to V3 only (V2 never set font-family \u2014 applying\n// it there would be a visible change). Per-size font-weight/line-height\n// (b3/b1/h4-strong per the Button [Filled Variant] design spec v3.0.0) are\n// intentionally deferred to a future iteration \u2014 this fix keeps font-weight,\n// line-height, and font-size exactly as they were for every size.\nconst typographyBase = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? typographyFontFamily : '')}\n`;\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 // Apply the shared font-family (PUI-18721) as the text styling base for V3\n // buttons. font-weight (below), font-size (fontSizeSettings), and line-height\n // (below) are declared AFTER this and win the cascade unconditionally, so\n // button height/line-height/font-size/font-weight are all unaffected \u2014\n // only font-family changes.\n ${typographyBase}\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": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,4BAA4B;AACrC,SAAS,eAAe,cAAc,cAAc,aAAa,aAAa;AAC9E,SAAS,cAAc,qBAAqB;AAS5C,MAAM,iBAAiB;AAAA,IACnB,CAAC,EAAE,MAAM,MAAO,QAAQ,uBAAuB,EAAG;AAAA;AAU/C,MAAM,qBAAqB,OAAO,MAAM;AAAA;AAAA;AAAA;AAK/C,MAAM,eAAe;AAAA;AAAA;AAAA,kBAGH,CAAC,EAAE,OAAO,YAAY,MACpC,UAAU,aAAa,KAAK,gBAAgB,aAAa,SAAS,QAAQ,KAAK;AAAA,IAC/E,CAAC,gBAAgB;AACjB,QAAM,EAAE,aAAa,QAAQ,MAAM,IAAI;AACvC,MAAI,gBAAgB,aAAa,UAAU,gBAAgB,aAAa,aAAa;AACnF,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,2BAC1B,WAAW,cAAc,UAAU,QAAQ,KAAK;AAAA;AAAA,EAEvE;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,WAAW,cAAc,UAAU,QAAQ,KAAK;AAAA;AAEpE,CAAC;AAAA;AAGH,MAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,OAAO,OAAO,YAAY,MAAM;AACnC,UAAQ,OAAO;AAAA,IACb,KAAK,aAAa;AAChB,UAAI,gBAAgB,aAAa,KAAM,QAAO,cAAc,MAAM,UAAU,MAAM,GAAG,CAAC;AACtF,aAAO,cAAc,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,IACjD,KAAK,aAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA,IAEzC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA,EAE3C;AACF,CAAC;AAAA;AAGH,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB,MAAM,YAAY,OAAO,UAAU;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,iBAAiB;AAAA;AAGrB,MAAM,sBAAsB;AAAA,IACxB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMD,CAAC,EAAE,aAAa,MAAM,MACnC,UAAU,SACV,gBAAgB,aAAa,QAC7B,gBAAgB,aAAa,gBAC7B,gBAAgB,aAAa,cACzB,WACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX,CAAC,EAAE,OAAO,MAAM,MAAM;AACtB,MAAI,OAAO;AACT,WAAO;AAAA;AAAA;AAAA;AAAA,+BAIkB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,EAIlD;AACA,SAAO;AACT,CAAC;AAAA,aACU,CAAC,EAAE,OAAO,aAAa,OAAO,MAAM,MAC7C,gBAAgB,aAAa,QAC7B,gBAAgB,aAAa,gBAC7B,gBAAgB,aAAa,cACzB,MACA,UAAU,QACR,KAAK,MAAM,MAAM,EAAE,MACnB,UAAU,aAAa,IACrB,SAAS,MAAM,MAAM,EAAE,WACvB,UAAU,aAAa,MAAM,gBAAgB,aAAa,WAAW,gBAAgB,aAAa,QAChG,SAAS,MAAM,MAAM,EAAE,WACvB,UAAU,aAAa,IACrB,OAAO,MAAM,MAAM,EAAE,SACrB,UAAU,aAAa,MAAM,gBAAgB,aAAa,WAAW,gBAAgB,aAAa,QAChG,SAAS,MAAM,MAAM,EAAE,WACvB,OAAO,MAAM,MAAM,EAAE,MAAM;AAAA;AAAA,IAEzC,CAAC,EAAE,OAAO,MAAM,MAAO,QAAQ,eAAe,YAAY,KAAK,CAAC,MAAM,WAAW,YAAY,KAAK,CAAC,GAAI;AAAA,eAC5F,CAAC,EAAE,MAAM,MAAM,YAAY,KAAK,CAAC;AAAA,uBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,MACvD,CAAC,EAAE,OAAO,MAAM,MAAO,QAAQ,eAAe,MAAM,KAAK,CAAC,MAAM,WAAW,MAAM,KAAK,CAAC,GAAI;AAAA,iBAChF,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA,mBAEzB,CAAC,gBAAgB;AAChC,QAAM,EAAE,OAAO,IAAI;AACnB,SAAO,WAAW,cAAc,UAAU,QAAQ;AACpD,CAAC;AAAA,IACC,gBAAgB;AAAA,IAChB,CAAC,EAAE,YAAY,MAAO,gBAAgB,aAAa,OAAO,+BAA+B,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5F,kBAAkB;AAAA;AAGf,MAAM,gBAAgB,OAAO,UAAU;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAGhB,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAAA;AAAA;AAAA,kBAIL,CAAC,EAAE,MAAM,MAAO,UAAU,MAAM,SAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsC3D,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBX,MAAM,gBAAgB,OAAO,UAAU;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAuCjB,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,aAAa,OAAO,UAAU;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyCjB,YAAY;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,8 @@ const testCompleteDefaults = {
|
|
|
31
31
|
buttonType: "filled",
|
|
32
32
|
onClick: () => null,
|
|
33
33
|
shape: "default",
|
|
34
|
-
applyAriaDisabled: false
|
|
34
|
+
applyAriaDisabled: false,
|
|
35
|
+
readOnly: false
|
|
35
36
|
};
|
|
36
37
|
const testInternalProps = {
|
|
37
38
|
...testRequiredProps,
|
|
@@ -91,6 +92,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
|
91
92
|
shape: "default",
|
|
92
93
|
innerRef: ref,
|
|
93
94
|
applyAriaDisabled: false,
|
|
95
|
+
readOnly: false,
|
|
94
96
|
children: "Button Label"
|
|
95
97
|
}
|
|
96
98
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-button-v3-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSButtonV3 } from '../index.js';\nimport type { DSButtonV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSButtonV3T.Props;\ntype ComponentPropsInternals = DSButtonV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSButtonV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSButtonV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSButtonV3T.RequiredProps;\n\nconst ref = createRef<HTMLButtonElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n buttonType: 'filled',\n onClick: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n applyAriaDisabled: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSButtonV3 {...testExplicitDefinition} />\n <DSButtonV3 {...testInferedTypeCompatibility} />\n <DSButtonV3 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSButtonV3\n data-testid=\"ds-button\"\n size=\"m\"\n type=\"button\"\n buttonType=\"filled\"\n onClick={() => null}\n shape=\"default\"\n innerRef={ref}\n applyAriaDisabled={false}\n >\n Button Label\n </DSButtonV3>\n </>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSButtonV3 } from '../index.js';\nimport type { DSButtonV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSButtonV3T.Props;\ntype ComponentPropsInternals = DSButtonV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSButtonV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSButtonV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSButtonV3T.RequiredProps;\n\nconst ref = createRef<HTMLButtonElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n buttonType: 'filled',\n onClick: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n 'data-testid': 'ds-button',\n size: 'm',\n type: 'button',\n buttonType: 'filled',\n onClick: () => null,\n shape: 'default',\n children: 'Button Label',\n innerRef: ref,\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSButtonV3 {...testExplicitDefinition} />\n <DSButtonV3 {...testInferedTypeCompatibility} />\n <DSButtonV3 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSButtonV3\n data-testid=\"ds-button\"\n size=\"m\"\n type=\"button\"\n buttonType=\"filled\"\n onClick={() => null}\n shape=\"default\"\n innerRef={ref}\n applyAriaDisabled={false}\n readOnly={false}\n >\n Button Label\n </DSButtonV3>\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwGrB,mBAEE,KAFF;AAvGF,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAU3B,MAAM,MAAM,UAA6B;AAEzC,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AAIA,MAAM,sBAA2D;AAAA,EAC/D,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,SAAS,MAAM;AACjB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAGA,MAAM,+BAA+B;AAAA,EACnC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AAAA,MACf,OAAM;AAAA,MACN,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSBu
|
|
|
3
3
|
export { DSButtonV3, DSButtonV3WithSchema, DSButtonV3PropTypes, DSButtonV3PropTypesSchema, type DSButtonV3T, } from './parts/DSButtonV3/index.js';
|
|
4
4
|
export { type DSButtonT, defaultProps as DSButtonV3DefaultProps, } from './parts/SharedButtonBaseline/react-desc-prop-types.js';
|
|
5
5
|
export { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/SharedButtonBaseline/DSButtonDefinitions.js';
|
|
6
|
+
export { DSButtonWithSchema } from './parts/SharedButtonBaseline/index.js';
|
|
@@ -18,6 +18,7 @@ export declare namespace DSButtonT {
|
|
|
18
18
|
onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
19
19
|
shape: ButtonShapesT;
|
|
20
20
|
applyAriaDisabled: boolean;
|
|
21
|
+
readOnly: boolean;
|
|
21
22
|
}
|
|
22
23
|
interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {
|
|
23
24
|
innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.71",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Button",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "https://
|
|
25
|
+
"url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
28
|
"pnpm": ">=9",
|
|
@@ -36,20 +36,21 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.71",
|
|
40
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.71",
|
|
41
|
+
"@elliemae/ds-typography": "3.70.0-next.71",
|
|
42
|
+
"@elliemae/ds-system": "3.70.0-next.71"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"jest": "^30.0.0",
|
|
45
|
-
"styled-components": "~5.3.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
46
|
+
"styled-components": "~5.3.11",
|
|
47
|
+
"@elliemae/ds-test-utils": "3.70.0-next.71",
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.71"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
50
51
|
"react": "^18.3.1",
|
|
51
52
|
"react-dom": "^18.3.1",
|
|
52
|
-
"styled-components": "~5.3.
|
|
53
|
+
"styled-components": "~5.3.11"
|
|
53
54
|
},
|
|
54
55
|
"publishConfig": {
|
|
55
56
|
"access": "public",
|
|
@@ -64,4 +65,4 @@
|
|
|
64
65
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
65
66
|
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
66
67
|
}
|
|
67
|
-
}
|
|
68
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|