@elliemae/ds-button-v1 3.16.0-next.4 → 3.16.0-next.6

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.
@@ -71,6 +71,7 @@ const DSButton = ({
71
71
  type,
72
72
  ...rest
73
73
  }) => {
74
+ (0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-button-v1", version: "TBD Date: 2023 Q3" });
74
75
  const [pressed, setPressed] = (0, import_react.useState)(false);
75
76
  const Button = (0, import_react.useMemo)(() => getContainer(Component), [Component]);
76
77
  const intentBlockName = `${blockName}${intent ? `-${intent}` : ""}`;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable jest/valid-title */\nimport React, { useState, useMemo } from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { cx } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from './constants';\nimport { btnPropTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\n\nconst blockName = 'button';\n\nconst getContainer = (Element) =>\n aggregatedClasses(Element)(\n blockName,\n null,\n ({ iconOnly, variant }) => ({\n 'icon-only': iconOnly,\n [variant]: variant,\n }),\n {\n propsToRemoveFromFinalElement: ['cx'],\n },\n );\n\ninterface ButtonPropsT {\n [x: string]: unknown;\n disabled?: boolean;\n fluidWidth?: boolean;\n innerRef?: unknown;\n buttonType?: (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];\n size?: (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];\n variant?: (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];\n labelText?: string;\n icon?: JSX.Element;\n leftIcon?: JSX.Element;\n tabIndex?: number;\n intent?: 'success' | 'danger' | 'warning' | 'info';\n containerProps?: { [x: string]: unknown };\n className?: string;\n as?: string | JSX.Element;\n type?: 'button' | 'text';\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;\n onKeyPress?: React.KeyboardEventHandler<HTMLElement>;\n}\n\n// eslint-disable-next-line complexity\nconst DSButton = ({\n innerRef,\n disabled,\n buttonType,\n fluidWidth,\n size,\n labelText,\n icon,\n onBlur,\n onClick,\n onKeyPress,\n leftIcon,\n tabIndex,\n variant,\n intent,\n containerProps,\n className,\n as: Component,\n type,\n ...rest\n}: ButtonPropsT) => {\n const [pressed, setPressed] = useState(false);\n const Button = useMemo(() => getContainer(Component), [Component]);\n const intentBlockName = `${blockName}${intent ? `-${intent}` : ''}`;\n const { cssClassName: intentClassName } = convertPropToCssClassName(intentBlockName);\n return (\n <Button\n data-testid={(containerProps && containerProps['data-testid']) || 'button-wrapper'}\n {...rest}\n {...containerProps}\n aria-disabled={rest['aria-disabled'] !== undefined ? rest['aria-disabled'] : disabled}\n aria-label={rest['aria-label'] || labelText || 'button'}\n aria-pressed={pressed}\n className={cx(intentClassName, className)}\n classProps={{\n disabled,\n // DON'T CHANGE FOR defaultProps\n // using OR to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n buttonType: buttonType || BUTTON_TYPE.PRIMARY,\n // using or to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n size: size || BUTTON_SIZE.M,\n fluidWidth,\n iconOnly: !labelText && (icon || leftIcon),\n variant: disabled ? BUTTON_VARIANT.DISABLED : variant,\n }}\n disabled={disabled} // https://jira.elliemae.io/browse/PUI-1215\n innerRef={innerRef}\n onBlur={(e: React.FocusEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(false);\n if (onBlur) onBlur(e);\n }}\n onClick={(e: React.MouseEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(true);\n if (onClick) onClick(e);\n }}\n onKeyPress={(e: React.KeyboardEvent<HTMLElement>) => {\n if (disabled) return;\n e.preventDefault();\n if (e.key === 'Enter') {\n setPressed(true);\n if (onClick) onClick(e);\n }\n if (onKeyPress) onKeyPress(e);\n }}\n tabIndex={tabIndex}\n type={type}\n >\n {leftIcon}\n {labelText && (\n <span\n className={`label-wrapper ${icon || leftIcon ? 'with-icon' : 'no-icon'}`}\n data-testid=\"button-label\"\n role=\"presentation\"\n >\n <span>{labelText}</span>\n </span>\n )}\n {icon}\n </Button>\n );\n};\n\nDSButton.defaultProps = defaultProps;\nDSButton.propTypes = btnPropTypes;\nDSButton.displayName = 'DSButton';\n\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = btnPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\nexport default DSButton;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAxEJ,mBAAyC;AACzC,2BAA6D;AAC7D,0BAAmB;AACnB,8BAAyB;AACzB,uBAAyD;AACzD,uBAA6B;AAC7B,0BAA6B;AAE7B,MAAM,YAAY;AAElB,MAAM,eAAe,CAAC,gBACpB,wCAAkB,OAAO;AAAA,EACvB;AAAA,EACA;AAAA,EACA,CAAC,EAAE,UAAU,QAAQ,OAAO;AAAA,IAC1B,aAAa;AAAA,IACb,CAAC,UAAU;AAAA,EACb;AAAA,EACA;AAAA,IACE,+BAA+B,CAAC,IAAI;AAAA,EACtC;AACF;AAyBF,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,KACG;AACL,MAAoB;AAClB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,aAAS,sBAAQ,MAAM,aAAa,SAAS,GAAG,CAAC,SAAS,CAAC;AACjE,QAAM,kBAAkB,GAAG,YAAY,SAAS,IAAI,WAAW;AAC/D,QAAM,EAAE,cAAc,gBAAgB,QAAI,gDAA0B,eAAe;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc,kBAAkB,eAAe,kBAAmB;AAAA,MACjE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe,KAAK,qBAAqB,SAAY,KAAK,mBAAmB;AAAA,MAC7E,cAAY,KAAK,iBAAiB,aAAa;AAAA,MAC/C,gBAAc;AAAA,MACd,eAAW,wBAAG,iBAAiB,SAAS;AAAA,MACxC,YAAY;AAAA,QACV;AAAA,QAGA,YAAY,cAAc,6BAAY;AAAA,QAEtC,MAAM,QAAQ,6BAAY;AAAA,QAC1B;AAAA,QACA,UAAU,CAAC,cAAc,QAAQ;AAAA,QACjC,SAAS,WAAW,gCAAe,WAAW;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,MAAqC;AAC5C,YAAI;AAAU;AACd,mBAAW,KAAK;AAChB,YAAI;AAAQ,iBAAO,CAAC;AAAA,MACtB;AAAA,MACA,SAAS,CAAC,MAAqC;AAC7C,YAAI;AAAU;AACd,mBAAW,IAAI;AACf,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAAA,MACA,YAAY,CAAC,MAAwC;AACnD,YAAI;AAAU;AACd,UAAE,eAAe;AACjB,YAAI,EAAE,QAAQ,SAAS;AACrB,qBAAW,IAAI;AACf,cAAI;AAAS,oBAAQ,CAAC;AAAA,QACxB;AACA,YAAI;AAAY,qBAAW,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,QAAQ,WAAW,cAAc;AAAA,YAC7D,eAAY;AAAA,YACZ,MAAK;AAAA,YAEL,sDAAC,UAAM,qBAAU;AAAA;AAAA,QACnB;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable jest/valid-title */\nimport React, { useState, useMemo } from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { cx, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from './constants';\nimport { btnPropTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\n\nconst blockName = 'button';\n\nconst getContainer = (Element) =>\n aggregatedClasses(Element)(\n blockName,\n null,\n ({ iconOnly, variant }) => ({\n 'icon-only': iconOnly,\n [variant]: variant,\n }),\n {\n propsToRemoveFromFinalElement: ['cx'],\n },\n );\n\ninterface ButtonPropsT {\n [x: string]: unknown;\n disabled?: boolean;\n fluidWidth?: boolean;\n innerRef?: unknown;\n buttonType?: (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];\n size?: (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];\n variant?: (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];\n labelText?: string;\n icon?: JSX.Element;\n leftIcon?: JSX.Element;\n tabIndex?: number;\n intent?: 'success' | 'danger' | 'warning' | 'info';\n containerProps?: { [x: string]: unknown };\n className?: string;\n as?: string | JSX.Element;\n type?: 'button' | 'text';\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;\n onKeyPress?: React.KeyboardEventHandler<HTMLElement>;\n}\n\n// eslint-disable-next-line complexity\nconst DSButton = ({\n innerRef,\n disabled,\n buttonType,\n fluidWidth,\n size,\n labelText,\n icon,\n onBlur,\n onClick,\n onKeyPress,\n leftIcon,\n tabIndex,\n variant,\n intent,\n containerProps,\n className,\n as: Component,\n type,\n ...rest\n}: ButtonPropsT) => {\n useDeprecateComponent({ componentName: 'ds-button-v1', version: 'TBD Date: 2023 Q3' });\n\n const [pressed, setPressed] = useState(false);\n const Button = useMemo(() => getContainer(Component), [Component]);\n const intentBlockName = `${blockName}${intent ? `-${intent}` : ''}`;\n const { cssClassName: intentClassName } = convertPropToCssClassName(intentBlockName);\n return (\n <Button\n data-testid={(containerProps && containerProps['data-testid']) || 'button-wrapper'}\n {...rest}\n {...containerProps}\n aria-disabled={rest['aria-disabled'] !== undefined ? rest['aria-disabled'] : disabled}\n aria-label={rest['aria-label'] || labelText || 'button'}\n aria-pressed={pressed}\n className={cx(intentClassName, className)}\n classProps={{\n disabled,\n // DON'T CHANGE FOR defaultProps\n // using OR to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n buttonType: buttonType || BUTTON_TYPE.PRIMARY,\n // using or to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n size: size || BUTTON_SIZE.M,\n fluidWidth,\n iconOnly: !labelText && (icon || leftIcon),\n variant: disabled ? BUTTON_VARIANT.DISABLED : variant,\n }}\n disabled={disabled} // https://jira.elliemae.io/browse/PUI-1215\n innerRef={innerRef}\n onBlur={(e: React.FocusEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(false);\n if (onBlur) onBlur(e);\n }}\n onClick={(e: React.MouseEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(true);\n if (onClick) onClick(e);\n }}\n onKeyPress={(e: React.KeyboardEvent<HTMLElement>) => {\n if (disabled) return;\n e.preventDefault();\n if (e.key === 'Enter') {\n setPressed(true);\n if (onClick) onClick(e);\n }\n if (onKeyPress) onKeyPress(e);\n }}\n tabIndex={tabIndex}\n type={type}\n >\n {leftIcon}\n {labelText && (\n <span\n className={`label-wrapper ${icon || leftIcon ? 'with-icon' : 'no-icon'}`}\n data-testid=\"button-label\"\n role=\"presentation\"\n >\n <span>{labelText}</span>\n </span>\n )}\n {icon}\n </Button>\n );\n};\n\nDSButton.defaultProps = defaultProps;\nDSButton.propTypes = btnPropTypes;\nDSButton.displayName = 'DSButton';\n\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = btnPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\nexport default DSButton;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4EnB;AA1EJ,mBAAyC;AACzC,2BAA6D;AAC7D,0BAA0C;AAC1C,8BAAyB;AACzB,uBAAyD;AACzD,uBAA6B;AAC7B,0BAA6B;AAE7B,MAAM,YAAY;AAElB,MAAM,eAAe,CAAC,gBACpB,wCAAkB,OAAO;AAAA,EACvB;AAAA,EACA;AAAA,EACA,CAAC,EAAE,UAAU,QAAQ,OAAO;AAAA,IAC1B,aAAa;AAAA,IACb,CAAC,UAAU;AAAA,EACb;AAAA,EACA;AAAA,IACE,+BAA+B,CAAC,IAAI;AAAA,EACtC;AACF;AAyBF,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,KACG;AACL,MAAoB;AAClB,iDAAsB,EAAE,eAAe,gBAAgB,SAAS,oBAAoB,CAAC;AAErF,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,aAAS,sBAAQ,MAAM,aAAa,SAAS,GAAG,CAAC,SAAS,CAAC;AACjE,QAAM,kBAAkB,GAAG,YAAY,SAAS,IAAI,WAAW;AAC/D,QAAM,EAAE,cAAc,gBAAgB,QAAI,gDAA0B,eAAe;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc,kBAAkB,eAAe,kBAAmB;AAAA,MACjE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe,KAAK,qBAAqB,SAAY,KAAK,mBAAmB;AAAA,MAC7E,cAAY,KAAK,iBAAiB,aAAa;AAAA,MAC/C,gBAAc;AAAA,MACd,eAAW,wBAAG,iBAAiB,SAAS;AAAA,MACxC,YAAY;AAAA,QACV;AAAA,QAGA,YAAY,cAAc,6BAAY;AAAA,QAEtC,MAAM,QAAQ,6BAAY;AAAA,QAC1B;AAAA,QACA,UAAU,CAAC,cAAc,QAAQ;AAAA,QACjC,SAAS,WAAW,gCAAe,WAAW;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,MAAqC;AAC5C,YAAI;AAAU;AACd,mBAAW,KAAK;AAChB,YAAI;AAAQ,iBAAO,CAAC;AAAA,MACtB;AAAA,MACA,SAAS,CAAC,MAAqC;AAC7C,YAAI;AAAU;AACd,mBAAW,IAAI;AACf,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAAA,MACA,YAAY,CAAC,MAAwC;AACnD,YAAI;AAAU;AACd,UAAE,eAAe;AACjB,YAAI,EAAE,QAAQ,SAAS;AACrB,qBAAW,IAAI;AACf,cAAI;AAAS,oBAAQ,CAAC;AAAA,QACxB;AACA,YAAI;AAAY,qBAAW,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,QAAQ,WAAW,cAAc;AAAA,YAC7D,eAAY;AAAA,YACZ,MAAK;AAAA,YAEL,sDAAC,UAAM,qBAAU;AAAA;AAAA,QACnB;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/index.js CHANGED
@@ -29,7 +29,7 @@ __export(src_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(src_exports);
31
31
  var React = __toESM(require("react"));
32
- __reExport(src_exports, require("./DSButton"), module.exports);
32
+ __reExport(src_exports, require("./DSButton.js"), module.exports);
33
33
  __reExport(src_exports, require("./constants"), module.exports);
34
34
  var import_DSButton = __toESM(require("./DSButton"));
35
35
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export * from './DSButton';\nexport * from './constants';\nexport { default } from './DSButton';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,uBAAd;AACA,wBAAc,wBADd;AAEA,sBAAwB;",
4
+ "sourcesContent": ["export * from './DSButton.js';\nexport * from './constants';\nexport { default } from './DSButton';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,0BAAd;AACA,wBAAc,wBADd;AAEA,sBAAwB;",
6
6
  "names": []
7
7
  }
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useState, useMemo } from "react";
4
4
  import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
5
- import { cx } from "@elliemae/ds-utilities";
5
+ import { cx, useDeprecateComponent } from "@elliemae/ds-utilities";
6
6
  import { describe } from "@elliemae/ds-props-helpers";
7
7
  import { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from "./constants";
8
8
  import { btnPropTypes } from "./propTypes";
@@ -40,6 +40,7 @@ const DSButton = ({
40
40
  type,
41
41
  ...rest
42
42
  }) => {
43
+ useDeprecateComponent({ componentName: "ds-button-v1", version: "TBD Date: 2023 Q3" });
43
44
  const [pressed, setPressed] = useState(false);
44
45
  const Button = useMemo(() => getContainer(Component), [Component]);
45
46
  const intentBlockName = `${blockName}${intent ? `-${intent}` : ""}`;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSButton.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable jest/valid-title */\nimport React, { useState, useMemo } from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { cx } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from './constants';\nimport { btnPropTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\n\nconst blockName = 'button';\n\nconst getContainer = (Element) =>\n aggregatedClasses(Element)(\n blockName,\n null,\n ({ iconOnly, variant }) => ({\n 'icon-only': iconOnly,\n [variant]: variant,\n }),\n {\n propsToRemoveFromFinalElement: ['cx'],\n },\n );\n\ninterface ButtonPropsT {\n [x: string]: unknown;\n disabled?: boolean;\n fluidWidth?: boolean;\n innerRef?: unknown;\n buttonType?: (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];\n size?: (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];\n variant?: (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];\n labelText?: string;\n icon?: JSX.Element;\n leftIcon?: JSX.Element;\n tabIndex?: number;\n intent?: 'success' | 'danger' | 'warning' | 'info';\n containerProps?: { [x: string]: unknown };\n className?: string;\n as?: string | JSX.Element;\n type?: 'button' | 'text';\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;\n onKeyPress?: React.KeyboardEventHandler<HTMLElement>;\n}\n\n// eslint-disable-next-line complexity\nconst DSButton = ({\n innerRef,\n disabled,\n buttonType,\n fluidWidth,\n size,\n labelText,\n icon,\n onBlur,\n onClick,\n onKeyPress,\n leftIcon,\n tabIndex,\n variant,\n intent,\n containerProps,\n className,\n as: Component,\n type,\n ...rest\n}: ButtonPropsT) => {\n const [pressed, setPressed] = useState(false);\n const Button = useMemo(() => getContainer(Component), [Component]);\n const intentBlockName = `${blockName}${intent ? `-${intent}` : ''}`;\n const { cssClassName: intentClassName } = convertPropToCssClassName(intentBlockName);\n return (\n <Button\n data-testid={(containerProps && containerProps['data-testid']) || 'button-wrapper'}\n {...rest}\n {...containerProps}\n aria-disabled={rest['aria-disabled'] !== undefined ? rest['aria-disabled'] : disabled}\n aria-label={rest['aria-label'] || labelText || 'button'}\n aria-pressed={pressed}\n className={cx(intentClassName, className)}\n classProps={{\n disabled,\n // DON'T CHANGE FOR defaultProps\n // using OR to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n buttonType: buttonType || BUTTON_TYPE.PRIMARY,\n // using or to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n size: size || BUTTON_SIZE.M,\n fluidWidth,\n iconOnly: !labelText && (icon || leftIcon),\n variant: disabled ? BUTTON_VARIANT.DISABLED : variant,\n }}\n disabled={disabled} // https://jira.elliemae.io/browse/PUI-1215\n innerRef={innerRef}\n onBlur={(e: React.FocusEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(false);\n if (onBlur) onBlur(e);\n }}\n onClick={(e: React.MouseEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(true);\n if (onClick) onClick(e);\n }}\n onKeyPress={(e: React.KeyboardEvent<HTMLElement>) => {\n if (disabled) return;\n e.preventDefault();\n if (e.key === 'Enter') {\n setPressed(true);\n if (onClick) onClick(e);\n }\n if (onKeyPress) onKeyPress(e);\n }}\n tabIndex={tabIndex}\n type={type}\n >\n {leftIcon}\n {labelText && (\n <span\n className={`label-wrapper ${icon || leftIcon ? 'with-icon' : 'no-icon'}`}\n data-testid=\"button-label\"\n role=\"presentation\"\n >\n <span>{labelText}</span>\n </span>\n )}\n {icon}\n </Button>\n );\n};\n\nDSButton.defaultProps = defaultProps;\nDSButton.propTypes = btnPropTypes;\nDSButton.displayName = 'DSButton';\n\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = btnPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\nexport default DSButton;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC0EnB,SAkDM,KAlDN;AAxEJ,SAAgB,UAAU,eAAe;AACzC,SAAS,mBAAmB,iCAAiC;AAC7D,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,aAAa,aAAa,sBAAsB;AACzD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,MAAM,YAAY;AAElB,MAAM,eAAe,CAAC,YACpB,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA;AAAA,EACA,CAAC,EAAE,UAAU,QAAQ,OAAO;AAAA,IAC1B,aAAa;AAAA,IACb,CAAC,UAAU;AAAA,EACb;AAAA,EACA;AAAA,IACE,+BAA+B,CAAC,IAAI;AAAA,EACtC;AACF;AAyBF,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,KACG;AACL,MAAoB;AAClB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,QAAQ,MAAM,aAAa,SAAS,GAAG,CAAC,SAAS,CAAC;AACjE,QAAM,kBAAkB,GAAG,YAAY,SAAS,IAAI,WAAW;AAC/D,QAAM,EAAE,cAAc,gBAAgB,IAAI,0BAA0B,eAAe;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc,kBAAkB,eAAe,kBAAmB;AAAA,MACjE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe,KAAK,qBAAqB,SAAY,KAAK,mBAAmB;AAAA,MAC7E,cAAY,KAAK,iBAAiB,aAAa;AAAA,MAC/C,gBAAc;AAAA,MACd,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,YAAY;AAAA,QACV;AAAA,QAGA,YAAY,cAAc,YAAY;AAAA,QAEtC,MAAM,QAAQ,YAAY;AAAA,QAC1B;AAAA,QACA,UAAU,CAAC,cAAc,QAAQ;AAAA,QACjC,SAAS,WAAW,eAAe,WAAW;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,MAAqC;AAC5C,YAAI;AAAU;AACd,mBAAW,KAAK;AAChB,YAAI;AAAQ,iBAAO,CAAC;AAAA,MACtB;AAAA,MACA,SAAS,CAAC,MAAqC;AAC7C,YAAI;AAAU;AACd,mBAAW,IAAI;AACf,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAAA,MACA,YAAY,CAAC,MAAwC;AACnD,YAAI;AAAU;AACd,UAAE,eAAe;AACjB,YAAI,EAAE,QAAQ,SAAS;AACrB,qBAAW,IAAI;AACf,cAAI;AAAS,oBAAQ,CAAC;AAAA,QACxB;AACA,YAAI;AAAY,qBAAW,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,QAAQ,WAAW,cAAc;AAAA,YAC7D,eAAY;AAAA,YACZ,MAAK;AAAA,YAEL,8BAAC,UAAM,qBAAU;AAAA;AAAA,QACnB;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable jest/valid-title */\nimport React, { useState, useMemo } from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { cx, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from './constants';\nimport { btnPropTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\n\nconst blockName = 'button';\n\nconst getContainer = (Element) =>\n aggregatedClasses(Element)(\n blockName,\n null,\n ({ iconOnly, variant }) => ({\n 'icon-only': iconOnly,\n [variant]: variant,\n }),\n {\n propsToRemoveFromFinalElement: ['cx'],\n },\n );\n\ninterface ButtonPropsT {\n [x: string]: unknown;\n disabled?: boolean;\n fluidWidth?: boolean;\n innerRef?: unknown;\n buttonType?: (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];\n size?: (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];\n variant?: (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];\n labelText?: string;\n icon?: JSX.Element;\n leftIcon?: JSX.Element;\n tabIndex?: number;\n intent?: 'success' | 'danger' | 'warning' | 'info';\n containerProps?: { [x: string]: unknown };\n className?: string;\n as?: string | JSX.Element;\n type?: 'button' | 'text';\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;\n onKeyPress?: React.KeyboardEventHandler<HTMLElement>;\n}\n\n// eslint-disable-next-line complexity\nconst DSButton = ({\n innerRef,\n disabled,\n buttonType,\n fluidWidth,\n size,\n labelText,\n icon,\n onBlur,\n onClick,\n onKeyPress,\n leftIcon,\n tabIndex,\n variant,\n intent,\n containerProps,\n className,\n as: Component,\n type,\n ...rest\n}: ButtonPropsT) => {\n useDeprecateComponent({ componentName: 'ds-button-v1', version: 'TBD Date: 2023 Q3' });\n\n const [pressed, setPressed] = useState(false);\n const Button = useMemo(() => getContainer(Component), [Component]);\n const intentBlockName = `${blockName}${intent ? `-${intent}` : ''}`;\n const { cssClassName: intentClassName } = convertPropToCssClassName(intentBlockName);\n return (\n <Button\n data-testid={(containerProps && containerProps['data-testid']) || 'button-wrapper'}\n {...rest}\n {...containerProps}\n aria-disabled={rest['aria-disabled'] !== undefined ? rest['aria-disabled'] : disabled}\n aria-label={rest['aria-label'] || labelText || 'button'}\n aria-pressed={pressed}\n className={cx(intentClassName, className)}\n classProps={{\n disabled,\n // DON'T CHANGE FOR defaultProps\n // using OR to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n buttonType: buttonType || BUTTON_TYPE.PRIMARY,\n // using or to keep ButtonGroup behavior at packages/ds-basic/src/ButtonGroup/DSButtonGroup\n size: size || BUTTON_SIZE.M,\n fluidWidth,\n iconOnly: !labelText && (icon || leftIcon),\n variant: disabled ? BUTTON_VARIANT.DISABLED : variant,\n }}\n disabled={disabled} // https://jira.elliemae.io/browse/PUI-1215\n innerRef={innerRef}\n onBlur={(e: React.FocusEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(false);\n if (onBlur) onBlur(e);\n }}\n onClick={(e: React.MouseEvent<HTMLElement>) => {\n if (disabled) return;\n setPressed(true);\n if (onClick) onClick(e);\n }}\n onKeyPress={(e: React.KeyboardEvent<HTMLElement>) => {\n if (disabled) return;\n e.preventDefault();\n if (e.key === 'Enter') {\n setPressed(true);\n if (onClick) onClick(e);\n }\n if (onKeyPress) onKeyPress(e);\n }}\n tabIndex={tabIndex}\n type={type}\n >\n {leftIcon}\n {labelText && (\n <span\n className={`label-wrapper ${icon || leftIcon ? 'with-icon' : 'no-icon'}`}\n data-testid=\"button-label\"\n role=\"presentation\"\n >\n <span>{labelText}</span>\n </span>\n )}\n {icon}\n </Button>\n );\n};\n\nDSButton.defaultProps = defaultProps;\nDSButton.propTypes = btnPropTypes;\nDSButton.displayName = 'DSButton';\n\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = btnPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\nexport default DSButton;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC4EnB,SAkDM,KAlDN;AA1EJ,SAAgB,UAAU,eAAe;AACzC,SAAS,mBAAmB,iCAAiC;AAC7D,SAAS,IAAI,6BAA6B;AAC1C,SAAS,gBAAgB;AACzB,SAAS,aAAa,aAAa,sBAAsB;AACzD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,MAAM,YAAY;AAElB,MAAM,eAAe,CAAC,YACpB,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA;AAAA,EACA,CAAC,EAAE,UAAU,QAAQ,OAAO;AAAA,IAC1B,aAAa;AAAA,IACb,CAAC,UAAU;AAAA,EACb;AAAA,EACA;AAAA,IACE,+BAA+B,CAAC,IAAI;AAAA,EACtC;AACF;AAyBF,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,KACG;AACL,MAAoB;AAClB,wBAAsB,EAAE,eAAe,gBAAgB,SAAS,oBAAoB,CAAC;AAErF,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,QAAQ,MAAM,aAAa,SAAS,GAAG,CAAC,SAAS,CAAC;AACjE,QAAM,kBAAkB,GAAG,YAAY,SAAS,IAAI,WAAW;AAC/D,QAAM,EAAE,cAAc,gBAAgB,IAAI,0BAA0B,eAAe;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc,kBAAkB,eAAe,kBAAmB;AAAA,MACjE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe,KAAK,qBAAqB,SAAY,KAAK,mBAAmB;AAAA,MAC7E,cAAY,KAAK,iBAAiB,aAAa;AAAA,MAC/C,gBAAc;AAAA,MACd,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,YAAY;AAAA,QACV;AAAA,QAGA,YAAY,cAAc,YAAY;AAAA,QAEtC,MAAM,QAAQ,YAAY;AAAA,QAC1B;AAAA,QACA,UAAU,CAAC,cAAc,QAAQ;AAAA,QACjC,SAAS,WAAW,eAAe,WAAW;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,MAAqC;AAC5C,YAAI;AAAU;AACd,mBAAW,KAAK;AAChB,YAAI;AAAQ,iBAAO,CAAC;AAAA,MACtB;AAAA,MACA,SAAS,CAAC,MAAqC;AAC7C,YAAI;AAAU;AACd,mBAAW,IAAI;AACf,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAAA,MACA,YAAY,CAAC,MAAwC;AACnD,YAAI;AAAU;AACd,UAAE,eAAe;AACjB,YAAI,EAAE,QAAQ,SAAS;AACrB,qBAAW,IAAI;AACf,cAAI;AAAS,oBAAQ,CAAC;AAAA,QACxB;AACA,YAAI;AAAY,qBAAW,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,QAAQ,WAAW,cAAc;AAAA,YAC7D,eAAY;AAAA,YACZ,MAAK;AAAA,YAEL,8BAAC,UAAM,qBAAU;AAAA;AAAA,QACnB;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export * from "./DSButton";
2
+ export * from "./DSButton.js";
3
3
  export * from "./constants";
4
4
  import { default as default2 } from "./DSButton";
5
5
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSButton';\nexport * from './constants';\nexport { default } from './DSButton';\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSButton.js';\nexport * from './constants';\nexport { default } from './DSButton';\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAS,WAAAA,gBAAe;",
6
6
  "names": ["default"]
7
7
  }
@@ -1,3 +1,3 @@
1
- export * from './DSButton';
1
+ export * from './DSButton.js';
2
2
  export * from './constants';
3
3
  export { default } from './DSButton';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-button-v1",
3
- "version": "3.16.0-next.4",
3
+ "version": "3.16.0-next.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Button V 1",
6
6
  "files": [
@@ -51,20 +51,18 @@
51
51
  "indent": 4
52
52
  },
53
53
  "dependencies": {
54
- "@elliemae/ds-classnames": "3.16.0-next.4",
55
- "@elliemae/ds-props-helpers": "3.16.0-next.4",
56
- "@elliemae/ds-utilities": "3.16.0-next.4",
57
- "@elliemae/ds-shared": "3.16.0-next.4"
54
+ "@elliemae/ds-classnames": "3.16.0-next.6",
55
+ "@elliemae/ds-props-helpers": "3.16.0-next.6",
56
+ "@elliemae/ds-shared": "3.16.0-next.6",
57
+ "@elliemae/ds-utilities": "3.16.0-next.6"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@testing-library/jest-dom": "~5.16.4",
61
- "@testing-library/react": "~12.1.3",
62
- "styled-components": "~5.3.6"
61
+ "@testing-library/react": "~12.1.3"
63
62
  },
64
63
  "peerDependencies": {
65
64
  "react": "^17.0.2",
66
- "react-dom": "^17.0.2",
67
- "styled-components": "~5.3.6"
65
+ "react-dom": "^17.0.2"
68
66
  },
69
67
  "publishConfig": {
70
68
  "access": "public",
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }