@elliemae/ds-button-v2 3.51.0-next.8 → 3.51.0-rc.0

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 (19) hide show
  1. package/dist/cjs/parts/DSButtonV2/DSButtonV2Definitions.js +1 -1
  2. package/dist/cjs/parts/DSButtonV2/DSButtonV2Definitions.js.map +1 -1
  3. package/dist/cjs/parts/DSButtonV3/DSButtonV3Definitions.js +1 -1
  4. package/dist/cjs/parts/DSButtonV3/DSButtonV3Definitions.js.map +1 -1
  5. package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js +3 -2
  6. package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
  7. package/dist/cjs/parts/SharedButtonBaseline/styles.js +44 -5
  8. package/dist/cjs/parts/SharedButtonBaseline/styles.js.map +2 -2
  9. package/dist/esm/parts/DSButtonV2/DSButtonV2Definitions.js +1 -1
  10. package/dist/esm/parts/DSButtonV2/DSButtonV2Definitions.js.map +1 -1
  11. package/dist/esm/parts/DSButtonV3/DSButtonV3Definitions.js +1 -1
  12. package/dist/esm/parts/DSButtonV3/DSButtonV3Definitions.js.map +1 -1
  13. package/dist/esm/parts/SharedButtonBaseline/config/useButton.js +3 -2
  14. package/dist/esm/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
  15. package/dist/esm/parts/SharedButtonBaseline/styles.js +44 -5
  16. package/dist/esm/parts/SharedButtonBaseline/styles.js.map +2 -2
  17. package/dist/types/parts/DSButtonV2/DSButtonV2Definitions.d.ts +1 -1
  18. package/dist/types/parts/DSButtonV3/DSButtonV3Definitions.d.ts +1 -1
  19. package/package.json +7 -7
package/dist/cjs/parts/DSButtonV2/DSButtonV2Definitions.js CHANGED
@@ -34,7 +34,7 @@ __export(DSButtonV2Definitions_exports, {
34
34
  });
35
35
  module.exports = __toCommonJS(DSButtonV2Definitions_exports);
36
36
  var React = __toESM(require("react"));
37
- const DSButtonV2Name = "DSButtonV2";
37
+ const DSButtonV2Name = "DSButtonv2";
38
38
  const DSButtonV2DataTestId = {
39
39
  ROOT: "ds-button-v2"
40
40
  };
package/dist/cjs/parts/DSButtonV2/DSButtonV2Definitions.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSButtonV2/DSButtonV2Definitions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const DSButtonV2Name = 'DSButtonV2';\n\nexport const DSButtonV2DataTestId = {\n ROOT: 'ds-button-v2',\n};\nexport const DSButtonV2Slots = {\n ROOT: 'root',\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["export const DSButtonV2Name = 'DSButtonv2';\n\nexport const DSButtonV2DataTestId = {\n ROOT: 'ds-button-v2',\n};\nexport const DSButtonV2Slots = {\n ROOT: 'root',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,uBAAuB;AAAA,EAClC,MAAM;AACR;AACO,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AACR;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/DSButtonV3/DSButtonV3Definitions.js CHANGED
@@ -35,7 +35,7 @@ __export(DSButtonV3Definitions_exports, {
35
35
  module.exports = __toCommonJS(DSButtonV3Definitions_exports);
36
36
  var React = __toESM(require("react"));
37
37
  var import_ds_system = require("@elliemae/ds-system");
38
- const DSButtonV3Name = "DSButtonV3";
38
+ const DSButtonV3Name = "DSButtonv3";
39
39
  const DSButtonV3Slots = {
40
40
  ROOT: "root"
41
41
  };
package/dist/cjs/parts/DSButtonV3/DSButtonV3Definitions.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSButtonV3/DSButtonV3Definitions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nexport const DSButtonV3Name = 'DSButtonV3';\n\nexport const DSButtonV3Slots = {\n ROOT: 'root',\n};\nexport const DSButtonV3DataTestId = {\n ...(slotObjectToDataTestIds(DSButtonV3Name, DSButtonV3Slots) as Record<keyof typeof DSButtonV3Slots, string>),\n ROOT: 'ds-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nexport const DSButtonV3Name = 'DSButtonv3';\n\nexport const DSButtonV3Slots = {\n ROOT: 'root',\n};\nexport const DSButtonV3DataTestId = {\n ...(slotObjectToDataTestIds(DSButtonV3Name, DSButtonV3Slots) as Record<keyof typeof DSButtonV3Slots, string>),\n ROOT: 'ds-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AACR;AACO,MAAM,uBAAuB;AAAA,EAClC,OAAI,0CAAwB,gBAAgB,eAAe;AAAA,EAC3D,MAAM;AACR;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js CHANGED
@@ -47,11 +47,12 @@ const useButton = (props) => {
47
47
  const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;
48
48
  const handleOnKeyDown = import_react.default.useCallback(
49
49
  (e) => {
50
- if (disabled || applyAriaDisabled) {
50
+ const { key } = e;
51
+ if (["Space", " ", "Enter"].includes(key) && (disabled || applyAriaDisabled)) {
52
+ e.preventDefault();
51
53
  return;
52
54
  }
53
55
  onKeyDown?.(e);
54
- const { key } = e;
55
56
  if (["Space", " ", "Enter"].includes(key)) {
56
57
  e.preventDefault();
57
58
  onClick(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';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\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 ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled || applyAriaDisabled) {\n return;\n }\n\n onKeyDown?.(e);\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onClick, onKeyDown],\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 ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\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;AACjC,+BAAkC;AAa3B,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,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,kBAAkB,IAAI;AAE/D,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,SAAS,SAAS;AAAA,EAClD;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,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;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';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\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 ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;\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 (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onClick, onKeyDown],\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 ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\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;AACjC,+BAAkC;AAa3B,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,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,kBAAkB,IAAI;AAE/D,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,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,SAAS,SAAS;AAAA,EAClD;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,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/SharedButtonBaseline/styles.js CHANGED
@@ -130,7 +130,8 @@ const DefaultButton = (0, import_ds_system.styled)(RawButton, {
130
130
  border-radius: ${({ shape }) => shape === import_constants.BUTTON_SHAPES.DEFAULT ? "2px" : "50%"};
131
131
  ${fontSizeSettings}
132
132
  ${({ buttonType }) => buttonType === import_constants.BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
133
- &[aria-disabled='true'] {
133
+ &[aria-disabled='true'],
134
+ &[disabled] {
134
135
  cursor: not-allowed;
135
136
  }
136
137
  ${import_ds_system.xStyledCommonProps}
@@ -145,7 +146,16 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
145
146
  border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
146
147
  &:focus,
147
148
  &[data-testemulatestate='focus'] {
148
- &[aria-disabled='true'] {
149
+ &[aria-disabled='true'],
150
+ &[disabled],
151
+ &:hover[aria-disabled='true'],
152
+ &:hover[disabled],
153
+ &:active[aria-disabled='true'],
154
+ &:active[disabled],
155
+ &[data-testemulatestate='hover'][aria-disabled='true'],
156
+ &[data-testemulatestate='hover'][disabled],
157
+ &[data-testemulatestate='active'][aria-disabled='true'],
158
+ &[data-testemulatestate='active'][disabled] {
149
159
  &:after {
150
160
  ${pseudoBorder}
151
161
  border-color: neutral-100;
@@ -166,7 +176,16 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
166
176
  background-color: brand-700;
167
177
  border-color: brand-700;
168
178
  }
169
- &[aria-disabled='true'] {
179
+ &[aria-disabled='true'],
180
+ &[disabled],
181
+ &:hover[aria-disabled='true'],
182
+ &:hover[disabled],
183
+ &:active[aria-disabled='true'],
184
+ &:active[disabled],
185
+ &[data-testemulatestate='hover'][aria-disabled='true'],
186
+ &[data-testemulatestate='hover'][disabled],
187
+ &[data-testemulatestate='active'][aria-disabled='true'],
188
+ &[data-testemulatestate='active'][disabled] {
170
189
  background-color: neutral-100;
171
190
  border-color: neutral-100;
172
191
  color: #5c6574;
@@ -207,7 +226,16 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
207
226
  fill: brand-700;
208
227
  }
209
228
  }
210
- &[aria-disabled='true'] {
229
+ &[aria-disabled='true'],
230
+ &[disabled],
231
+ &:hover[aria-disabled='true'],
232
+ &:hover[disabled],
233
+ &:active[aria-disabled='true'],
234
+ &:active[disabled],
235
+ &[data-testemulatestate='hover'][aria-disabled='true'],
236
+ &[data-testemulatestate='hover'][disabled],
237
+ &[data-testemulatestate='active'][aria-disabled='true'],
238
+ &[data-testemulatestate='active'][disabled] {
211
239
  border-color: neutral-400;
212
240
  color: neutral-500;
213
241
  & svg {
@@ -234,6 +262,7 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton, {
234
262
  fill: brand-700;
235
263
  }
236
264
  &:hover:not([aria-disabled='true']),
265
+ &:hover:not([disabled]),
237
266
  &[data-testemulatestate='hover'] {
238
267
  background-color: brand-200;
239
268
  color: brand-700;
@@ -245,7 +274,17 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton, {
245
274
  &[data-testemulatestate='active'] {
246
275
  color: brand-700;
247
276
  }
248
- &[aria-disabled='true'] {
277
+
278
+ &[aria-disabled='true'],
279
+ &[disabled],
280
+ &:hover[aria-disabled='true'],
281
+ &:hover[disabled],
282
+ &:active[aria-disabled='true'],
283
+ &:active[disabled],
284
+ &[data-testemulatestate='hover'][aria-disabled='true'],
285
+ &[data-testemulatestate='hover'][disabled],
286
+ &[data-testemulatestate='active'][aria-disabled='true'],
287
+ &[data-testemulatestate='active'][disabled] {
249
288
  color: neutral-500;
250
289
  & svg {
251
290
  fill: neutral-500;
package/dist/cjs/parts/SharedButtonBaseline/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/SharedButtonBaseline/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ isV3, theme }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${sizes[size]};`)}\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n &[aria-disabled='true'] {\n &:after {\n ${pseudoBorder}\n border-color: neutral-100;\n }\n }\n &:after {\n ${pseudoBorder}\n }\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n\nexport const TextButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n &[aria-disabled='true'] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ isV3, theme }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${sizes[size]};`)}\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n &:after {\n ${pseudoBorder}\n border-color: neutral-100;\n }\n }\n &:after {\n ${pseudoBorder}\n }\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n\nexport const TextButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/DSButtonV2/DSButtonV2Definitions.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- const DSButtonV2Name = "DSButtonV2";
2
+ const DSButtonV2Name = "DSButtonv2";
3
3
  const DSButtonV2DataTestId = {
4
4
  ROOT: "ds-button-v2"
5
5
  };
package/dist/esm/parts/DSButtonV2/DSButtonV2Definitions.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButtonV2/DSButtonV2Definitions.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSButtonV2Name = 'DSButtonV2';\n\nexport const DSButtonV2DataTestId = {\n ROOT: 'ds-button-v2',\n};\nexport const DSButtonV2Slots = {\n ROOT: 'root',\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSButtonV2Name = 'DSButtonv2';\n\nexport const DSButtonV2DataTestId = {\n ROOT: 'ds-button-v2',\n};\nexport const DSButtonV2Slots = {\n ROOT: 'root',\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,uBAAuB;AAAA,EAClC,MAAM;AACR;AACO,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AACR;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/DSButtonV3/DSButtonV3Definitions.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { slotObjectToDataTestIds } from "@elliemae/ds-system";
3
- const DSButtonV3Name = "DSButtonV3";
3
+ const DSButtonV3Name = "DSButtonv3";
4
4
  const DSButtonV3Slots = {
5
5
  ROOT: "root"
6
6
  };
package/dist/esm/parts/DSButtonV3/DSButtonV3Definitions.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButtonV3/DSButtonV3Definitions.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nexport const DSButtonV3Name = 'DSButtonV3';\n\nexport const DSButtonV3Slots = {\n ROOT: 'root',\n};\nexport const DSButtonV3DataTestId = {\n ...(slotObjectToDataTestIds(DSButtonV3Name, DSButtonV3Slots) as Record<keyof typeof DSButtonV3Slots, string>),\n ROOT: 'ds-button',\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nexport const DSButtonV3Name = 'DSButtonv3';\n\nexport const DSButtonV3Slots = {\n ROOT: 'root',\n};\nexport const DSButtonV3DataTestId = {\n ...(slotObjectToDataTestIds(DSButtonV3Name, DSButtonV3Slots) as Record<keyof typeof DSButtonV3Slots, string>),\n ROOT: 'ds-button',\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AACR;AACO,MAAM,uBAAuB;AAAA,EAClC,GAAI,wBAAwB,gBAAgB,eAAe;AAAA,EAC3D,MAAM;AACR;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/SharedButtonBaseline/config/useButton.js CHANGED
@@ -14,11 +14,12 @@ const useButton = (props) => {
14
14
  const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;
15
15
  const handleOnKeyDown = React2.useCallback(
16
16
  (e) => {
17
- if (disabled || applyAriaDisabled) {
17
+ const { key } = e;
18
+ if (["Space", " ", "Enter"].includes(key) && (disabled || applyAriaDisabled)) {
19
+ e.preventDefault();
18
20
  return;
19
21
  }
20
22
  onKeyDown?.(e);
21
- const { key } = e;
22
23
  if (["Space", " ", "Enter"].includes(key)) {
23
24
  e.preventDefault();
24
25
  onClick(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';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\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 ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled || applyAriaDisabled) {\n return;\n }\n\n onKeyDown?.(e);\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onClick, onKeyDown],\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 ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,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,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,kBAAkB,IAAI;AAE/D,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,SAAS,SAAS;AAAA,EAClD;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,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;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';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\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 ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;\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 (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onClick, onKeyDown],\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 ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,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,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,kBAAkB,IAAI;AAE/D,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,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,SAAS,SAAS;AAAA,EAClD;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,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/SharedButtonBaseline/styles.js CHANGED
@@ -93,7 +93,8 @@ const DefaultButton = styled(RawButton, {
93
93
  border-radius: ${({ shape }) => shape === BUTTON_SHAPES.DEFAULT ? "2px" : "50%"};
94
94
  ${fontSizeSettings}
95
95
  ${({ buttonType }) => buttonType === BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
96
- &[aria-disabled='true'] {
96
+ &[aria-disabled='true'],
97
+ &[disabled] {
97
98
  cursor: not-allowed;
98
99
  }
99
100
  ${xStyledCommonProps}
@@ -108,7 +109,16 @@ const FilledButton = styled(DefaultButton, {
108
109
  border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
109
110
  &:focus,
110
111
  &[data-testemulatestate='focus'] {
111
- &[aria-disabled='true'] {
112
+ &[aria-disabled='true'],
113
+ &[disabled],
114
+ &:hover[aria-disabled='true'],
115
+ &:hover[disabled],
116
+ &:active[aria-disabled='true'],
117
+ &:active[disabled],
118
+ &[data-testemulatestate='hover'][aria-disabled='true'],
119
+ &[data-testemulatestate='hover'][disabled],
120
+ &[data-testemulatestate='active'][aria-disabled='true'],
121
+ &[data-testemulatestate='active'][disabled] {
112
122
  &:after {
113
123
  ${pseudoBorder}
114
124
  border-color: neutral-100;
@@ -129,7 +139,16 @@ const FilledButton = styled(DefaultButton, {
129
139
  background-color: brand-700;
130
140
  border-color: brand-700;
131
141
  }
132
- &[aria-disabled='true'] {
142
+ &[aria-disabled='true'],
143
+ &[disabled],
144
+ &:hover[aria-disabled='true'],
145
+ &:hover[disabled],
146
+ &:active[aria-disabled='true'],
147
+ &:active[disabled],
148
+ &[data-testemulatestate='hover'][aria-disabled='true'],
149
+ &[data-testemulatestate='hover'][disabled],
150
+ &[data-testemulatestate='active'][aria-disabled='true'],
151
+ &[data-testemulatestate='active'][disabled] {
133
152
  background-color: neutral-100;
134
153
  border-color: neutral-100;
135
154
  color: #5c6574;
@@ -170,7 +189,16 @@ const OutlineButton = styled(DefaultButton, {
170
189
  fill: brand-700;
171
190
  }
172
191
  }
173
- &[aria-disabled='true'] {
192
+ &[aria-disabled='true'],
193
+ &[disabled],
194
+ &:hover[aria-disabled='true'],
195
+ &:hover[disabled],
196
+ &:active[aria-disabled='true'],
197
+ &:active[disabled],
198
+ &[data-testemulatestate='hover'][aria-disabled='true'],
199
+ &[data-testemulatestate='hover'][disabled],
200
+ &[data-testemulatestate='active'][aria-disabled='true'],
201
+ &[data-testemulatestate='active'][disabled] {
174
202
  border-color: neutral-400;
175
203
  color: neutral-500;
176
204
  & svg {
@@ -197,6 +225,7 @@ const TextButton = styled(DefaultButton, {
197
225
  fill: brand-700;
198
226
  }
199
227
  &:hover:not([aria-disabled='true']),
228
+ &:hover:not([disabled]),
200
229
  &[data-testemulatestate='hover'] {
201
230
  background-color: brand-200;
202
231
  color: brand-700;
@@ -208,7 +237,17 @@ const TextButton = styled(DefaultButton, {
208
237
  &[data-testemulatestate='active'] {
209
238
  color: brand-700;
210
239
  }
211
- &[aria-disabled='true'] {
240
+
241
+ &[aria-disabled='true'],
242
+ &[disabled],
243
+ &:hover[aria-disabled='true'],
244
+ &:hover[disabled],
245
+ &:active[aria-disabled='true'],
246
+ &:active[disabled],
247
+ &[data-testemulatestate='hover'][aria-disabled='true'],
248
+ &[data-testemulatestate='hover'][disabled],
249
+ &[data-testemulatestate='active'][aria-disabled='true'],
250
+ &[data-testemulatestate='active'][disabled] {
212
251
  color: neutral-500;
213
252
  & svg {
214
253
  fill: neutral-500;
package/dist/esm/parts/SharedButtonBaseline/styles.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/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ isV3, theme }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${sizes[size]};`)}\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n &[aria-disabled='true'] {\n &:after {\n ${pseudoBorder}\n border-color: neutral-100;\n }\n }\n &:after {\n ${pseudoBorder}\n }\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n\nexport const TextButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n &[aria-disabled='true'] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ isV3, theme }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${sizes[size]};`)}\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n &:after {\n ${pseudoBorder}\n border-color: neutral-100;\n }\n }\n &:after {\n ${pseudoBorder}\n }\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n\nexport const TextButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/types/parts/DSButtonV2/DSButtonV2Definitions.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const DSButtonV2Name = "DSButtonV2";
1
+ export declare const DSButtonV2Name = "DSButtonv2";
2
2
  export declare const DSButtonV2DataTestId: {
3
3
  ROOT: string;
4
4
  };
package/dist/types/parts/DSButtonV3/DSButtonV3Definitions.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const DSButtonV3Name = "DSButtonV3";
1
+ export declare const DSButtonV3Name = "DSButtonv3";
2
2
  export declare const DSButtonV3Slots: {
3
3
  ROOT: string;
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-button-v2",
3
- "version": "3.51.0-next.8",
3
+ "version": "3.51.0-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Button",
6
6
  "files": [
@@ -25,8 +25,8 @@
25
25
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
26
26
  },
27
27
  "engines": {
28
- "pnpm": ">=6",
29
- "node": ">=16"
28
+ "pnpm": ">=9",
29
+ "node": ">=22"
30
30
  },
31
31
  "author": "ICE MT",
32
32
  "jestSonar": {
@@ -36,15 +36,15 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-props-helpers": "3.51.0-next.8",
40
- "@elliemae/ds-system": "3.51.0-next.8",
41
- "@elliemae/ds-typescript-helpers": "3.51.0-next.8"
39
+ "@elliemae/ds-props-helpers": "3.51.0-rc.0",
40
+ "@elliemae/ds-typescript-helpers": "3.51.0-rc.0",
41
+ "@elliemae/ds-system": "3.51.0-rc.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@elliemae/pui-cli": "9.0.0-next.55",
45
45
  "jest": "~29.7.0",
46
46
  "styled-components": "~5.3.9",
47
- "@elliemae/ds-monorepo-devops": "3.51.0-next.8"
47
+ "@elliemae/ds-monorepo-devops": "3.51.0-rc.0"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": "^18.3.1",