@elliemae/ds-button-v2 3.70.0-next.48 → 3.70.0-next.49

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.
Files changed (18) hide show
  1. package/dist/cjs/parts/SharedButtonBaseline/DSButton.js +3 -3
  2. package/dist/cjs/parts/SharedButtonBaseline/DSButton.js.map +2 -2
  3. package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js +5 -5
  4. package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
  5. package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js +5 -1
  6. package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
  7. package/dist/cjs/typescript-testing/typescript-button-v3-valid.js +3 -1
  8. package/dist/cjs/typescript-testing/typescript-button-v3-valid.js.map +2 -2
  9. package/dist/esm/parts/SharedButtonBaseline/DSButton.js +3 -3
  10. package/dist/esm/parts/SharedButtonBaseline/DSButton.js.map +2 -2
  11. package/dist/esm/parts/SharedButtonBaseline/config/useButton.js +5 -5
  12. package/dist/esm/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
  13. package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js +5 -1
  14. package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
  15. package/dist/esm/typescript-testing/typescript-button-v3-valid.js +3 -1
  16. package/dist/esm/typescript-testing/typescript-button-v3-valid.js.map +2 -2
  17. package/dist/types/parts/SharedButtonBaseline/react-desc-prop-types.d.ts +1 -0
  18. package/package.json +7 -7
package/dist/cjs/parts/SharedButtonBaseline/DSButton.js CHANGED
@@ -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, disabled, shape } = propsWithDefault;
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 || disabled,
63
+ "aria-disabled": applyAriaDisabled || readOnly ? true : void 0,
64
64
  ...propsWithoutReusedGlobals,
65
65
  ...xstyledProps,
66
66
  ...ownerPropsConfig,
package/dist/cjs/parts/SharedButtonBaseline/DSButton.js.map CHANGED
@@ -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, disabled, shape } = propsWithDefault;\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;\n\n return (\n <ButtonRenderer\n aria-disabled={applyAriaDisabled || disabled} // this should not print when false but it's a breaking change that needs to be coordinated\n {...propsWithoutReusedGlobals}\n {...xstyledProps}\n {...ownerPropsConfig}\n $shape={shape}\n $buttonType={buttonType}\n $size={size}\n $isV3={isV3}\n type={type}\n tabIndex={tabIndex}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n <StyledPseudoBorder className=\"pseudo-border\" aria-hidden=\"true\" />\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADeZ;AAfX,8BAAwC;AAExC,uBAA0B;AAC1B,iCAA6B;AAC7B,uBAA6B;AAE7B,mCAAkC;AAElC,oBAAsG;AAGtG,MAAM,iBAAiB,CAAC,qBAA2C;AACjE,QAAM,EAAE,UAAU,GAAG,aAAa,IAAI;AACtC,QAAM,aAAa,aAAa;AAChC,MAAI,eAAe,8BAAa,UAAU,eAAe,8BAAa;AACpE,WAAO,4CAAC,8BAAc,GAAG,cAAe,UAAS;AACnD,MAAI,eAAe,8BAAa,WAAW,eAAe,8BAAa;AACrE,WAAO,4CAAC,+BAAe,GAAG,cAAe,UAAS;AACpD,MAAI,eAAe,8BAAa,QAAQ,eAAe,8BAAa;AAClE,WAAO,4CAAC,4BAAY,GAAG,cAAe,UAAS;AACjD,MAAI,eAAe,8BAAa,IAAK,QAAO,4CAAC,2BAAW,GAAG,cAAe,UAAS;AACnF,SAAO,4CAAC,+BAAe,GAAG,cAAe,UAAS;AACpD;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,UAAU,mBAAmB,aAAa,cAAc,iBAAiB,cAAc,QAC/G,4BAAU,KAAK;AACjB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,mBAAmB,UAAU,MAAM,IAAI;AACjG,QAAM,uBAAmB,uCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AACrE,QAAM,EAAE,OAAO,oBAAoB,GAAG,0BAA0B,IAAI;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,qBAAqB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEb;AAAA,oDAAC,oCAAmB,WAAU,iBAAgB,eAAY,QAAO;AAAA,QAChE;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
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
  }
package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js CHANGED
@@ -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) => {
package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js.map CHANGED
@@ -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;AAGrE,QAAM,mBAAmB,OAAO,IAAI,EAAE,YAAY;AAElD,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,MAAM,YAAY,oBAAoB;AAC5E,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,UAAI,qBAAqB,YAAY,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1E,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,WAAW,kBAAkB,OAAO;AAAA,EACpE;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,iBAAiB,eAAe,UAAU,iBAAiB;AAAA,EAC3G;AACF;",
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
  }
package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js CHANGED
@@ -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
package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/SharedButtonBaseline/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAYO;AACP,iCAAgE;AAsDzD,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,8CAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,mBAAmB;AACrB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,OAAG,kDAAyB,yCAAc,wCAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,QAAQ,kCAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,kCAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,kCAAU,MAAM,uCAAsB,EACzC;AAAA,IACC,GAAG,wCAAuB;AAAA,EAC5B,EACC,aAAa,8BAAa,CAAC;AAAA,EAC9B,SAAS,kCAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,8CAAmB,IAAI;AAAA,EAC7G,yBAAyB,kCAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD,oDAAmC;AAAA,EACtF;AAAA,EACA,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
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\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n 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;AAuDzD,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
  }
package/dist/cjs/typescript-testing/typescript-button-v3-valid.js CHANGED
@@ -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
  )
package/dist/cjs/typescript-testing/typescript-button-v3-valid.js.map CHANGED
@@ -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;ACuGrB;AAtGF,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;AACrB;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,MACpB;AAAA;AAAA,EAED;AAAA,GACF;",
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/parts/SharedButtonBaseline/DSButton.js CHANGED
@@ -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, disabled, shape } = propsWithDefault;
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 || disabled,
29
+ "aria-disabled": applyAriaDisabled || readOnly ? true : void 0,
30
30
  ...propsWithoutReusedGlobals,
31
31
  ...xstyledProps,
32
32
  ...ownerPropsConfig,
package/dist/esm/parts/SharedButtonBaseline/DSButton.js.map CHANGED
@@ -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, disabled, shape } = propsWithDefault;\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n const { shape: removedShapeGlobal, ...propsWithoutReusedGlobals } = globalProps;\n\n return (\n <ButtonRenderer\n aria-disabled={applyAriaDisabled || disabled} // this should not print when false but it's a breaking change that needs to be coordinated\n {...propsWithoutReusedGlobals}\n {...xstyledProps}\n {...ownerPropsConfig}\n $shape={shape}\n $buttonType={buttonType}\n $size={size}\n $isV3={isV3}\n type={type}\n tabIndex={tabIndex}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n <StyledPseudoBorder className=\"pseudo-border\" aria-hidden=\"true\" />\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACeZ,cAiBP,YAjBO;AAfX,SAAS,UAAU,qBAAqB;AAExC,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,eAAe,cAAc,eAAe,WAAW,oBAAoB,kBAAkB;AAGtG,MAAM,iBAAiB,CAAC,qBAA2C;AACjE,QAAM,EAAE,UAAU,GAAG,aAAa,IAAI;AACtC,QAAM,aAAa,aAAa;AAChC,MAAI,eAAe,aAAa,UAAU,eAAe,aAAa;AACpE,WAAO,oBAAC,gBAAc,GAAG,cAAe,UAAS;AACnD,MAAI,eAAe,aAAa,WAAW,eAAe,aAAa;AACrE,WAAO,oBAAC,iBAAe,GAAG,cAAe,UAAS;AACpD,MAAI,eAAe,aAAa,QAAQ,eAAe,aAAa;AAClE,WAAO,oBAAC,cAAY,GAAG,cAAe,UAAS;AACjD,MAAI,eAAe,aAAa,IAAK,QAAO,oBAAC,aAAW,GAAG,cAAe,UAAS;AACnF,SAAO,oBAAC,iBAAe,GAAG,cAAe,UAAS;AACpD;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,UAAU,mBAAmB,aAAa,cAAc,iBAAiB,cAAc,IAC/G,UAAU,KAAK;AACjB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,mBAAmB,UAAU,MAAM,IAAI;AACjG,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AACrE,QAAM,EAAE,OAAO,oBAAoB,GAAG,0BAA0B,IAAI;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,qBAAqB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEb;AAAA,4BAAC,sBAAmB,WAAU,iBAAgB,eAAY,QAAO;AAAA,QAChE;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
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
  }
package/dist/esm/parts/SharedButtonBaseline/config/useButton.js CHANGED
@@ -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) => {
package/dist/esm/parts/SharedButtonBaseline/config/useButton.js.map CHANGED
@@ -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;AAGrE,QAAM,mBAAmB,OAAO,IAAI,EAAE,YAAY;AAElD,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,MAAM,YAAY,oBAAoB;AAC5E,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,UAAI,qBAAqB,YAAY,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1E,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,WAAW,kBAAkB,OAAO;AAAA,EACpE;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,QAAM,oBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,iBAAiB,eAAe,UAAU,iBAAiB;AAAA,EAC3G;AACF;",
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
  }
package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js CHANGED
@@ -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 {
package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/react-desc-prop-types.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,cAAc,qBAAqB;AAsDzD,MAAM,eAAuC;AAAA,EAClD,MAAM,aAAa;AAAA,EACnB,YAAY,aAAa;AAAA,EACzB,OAAO,cAAc;AAAA,EACrB,eAAe,mBAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,mBAAmB;AACrB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,QAAQ,UAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM,sBAAsB,EAC/C,YAAY,uBAAuB,EACnC,aAAa,aAAa,MAAM;AAAA,EACnC,OAAO,UAAU,MAAM,uBAAuB,EAC3C,YAAY,wBAAwB,EACpC,aAAa,cAAc,OAAO;AAAA,EACrC,MAAM,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,UAAU,MAAM,sBAAsB,EACzC;AAAA,IACC,GAAG,uBAAuB;AAAA,EAC5B,EACC,aAAa,aAAa,CAAC;AAAA,EAC9B,SAAS,UAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,mBAAmB,IAAI;AAAA,EAC7G,yBAAyB,UAAU,MAAM,uBAAuB,EAAE;AAAA,IAChE,iDAAiD,mCAAmC;AAAA,EACtF;AAAA,EACA,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
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\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n 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;AAuDzD,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
  }
package/dist/esm/typescript-testing/typescript-button-v3-valid.js CHANGED
@@ -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
  )
package/dist/esm/typescript-testing/typescript-button-v3-valid.js.map CHANGED
@@ -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;ACuGrB,mBAEE,KAFF;AAtGF,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;AACrB;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,MACpB;AAAA;AAAA,EAED;AAAA,GACF;",
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/parts/SharedButtonBaseline/react-desc-prop-types.d.ts CHANGED
@@ -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.48",
3
+ "version": "3.70.0-next.49",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Button",
6
6
  "files": [
@@ -36,16 +36,16 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-props-helpers": "3.70.0-next.48",
40
- "@elliemae/ds-system": "3.70.0-next.48",
41
- "@elliemae/ds-typography": "3.70.0-next.48",
42
- "@elliemae/ds-typescript-helpers": "3.70.0-next.48"
39
+ "@elliemae/ds-system": "3.70.0-next.49",
40
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.49",
41
+ "@elliemae/ds-typography": "3.70.0-next.49",
42
+ "@elliemae/ds-props-helpers": "3.70.0-next.49"
43
43
  },
44
44
  "devDependencies": {
45
45
  "jest": "^30.0.0",
46
46
  "styled-components": "~5.3.9",
47
- "@elliemae/ds-monorepo-devops": "3.70.0-next.48",
48
- "@elliemae/ds-test-utils": "3.70.0-next.48"
47
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.49",
48
+ "@elliemae/ds-test-utils": "3.70.0-next.49"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "react": "^18.3.1",