@elliemae/ds-chat-tile 3.40.0-rc.0 → 3.40.0-rc.2

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/TileButton.js +7 -3
  2. package/dist/cjs/TileButton.js.map +2 -2
  3. package/dist/cjs/react-desc-prop-types.js +6 -2
  4. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  5. package/dist/cjs/styled.js +4 -2
  6. package/dist/cjs/styled.js.map +2 -2
  7. package/dist/cjs/typescript-testing/typescript-chat-card-valid.js +16 -6
  8. package/dist/cjs/typescript-testing/typescript-chat-card-valid.js.map +2 -2
  9. package/dist/esm/TileButton.js +7 -3
  10. package/dist/esm/TileButton.js.map +2 -2
  11. package/dist/esm/react-desc-prop-types.js +6 -2
  12. package/dist/esm/react-desc-prop-types.js.map +2 -2
  13. package/dist/esm/styled.js +4 -2
  14. package/dist/esm/styled.js.map +2 -2
  15. package/dist/esm/typescript-testing/typescript-chat-card-valid.js +16 -6
  16. package/dist/esm/typescript-testing/typescript-chat-card-valid.js.map +2 -2
  17. package/dist/types/react-desc-prop-types.d.ts +6 -2
  18. package/dist/types/tests/DSChatTileButton.a11y.test.d.ts +1 -0
  19. package/package.json +7 -7
package/dist/cjs/TileButton.js CHANGED
@@ -64,11 +64,13 @@ const TileButton = (props) => {
64
64
  ariaLabel,
65
65
  tooltipPlacement,
66
66
  disableTooltip,
67
- innerRef
67
+ innerRef,
68
+ applyAriaDisabled
68
69
  } = propsWithDefault;
69
70
  const handleClick = import_react.default.useCallback(() => {
71
+ if (applyAriaDisabled) return;
70
72
  onClick(dsId, title);
71
- }, [dsId, onClick, title]);
73
+ }, [dsId, onClick, title, applyAriaDisabled]);
72
74
  const MainContent = import_react.default.useMemo(
73
75
  () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapperCentralContent, { alignItems: isHeader ? "center" : void 0, children: [
74
76
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { width: "100%", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledTileButtonIcon, { alignItems: "center", justifyContent: "center", children: [
@@ -103,6 +105,7 @@ const TileButton = (props) => {
103
105
  badgePosition,
104
106
  "aria-pressed": selected,
105
107
  "aria-label": ariaLabel,
108
+ "aria-disabled": applyAriaDisabled,
106
109
  innerRef,
107
110
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, { alignItems: "center", justifyContent: "center", children: [
108
111
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: MainContent }),
@@ -126,7 +129,8 @@ const TileButton = (props) => {
126
129
  onFocus,
127
130
  selected,
128
131
  showClose,
129
- innerRef
132
+ innerRef,
133
+ applyAriaDisabled
130
134
  ]
131
135
  );
132
136
  return title && !disableTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTooltipV3ButtonWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { id: `ds-chat-tile-tooltip-button-${dsId}`, text: title, startPlacementPreference: tooltipPlacement, children: Btn }) }) : Btn;
package/dist/cjs/TileButton.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TileButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n StyledTooltipV3ButtonWrapper,\n StyledTileButton,\n StyledTileButtonIcon,\n StyledTileButtonLabel,\n StyledWrapper,\n StyledWrapperLeftBorder,\n StyledStatusBadge,\n StyledWrapperCentralContent,\n CloseButton,\n} from './styled.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatTileT.InternalProps>(props, defaultTileButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\n\n const {\n label,\n title,\n dsId,\n onClick,\n onFocus,\n onBlur,\n Icon,\n showClose,\n onClose,\n badge,\n badgeColor,\n badgePosition,\n disabled,\n selected,\n isHeader,\n ariaLabel,\n tooltipPlacement,\n disableTooltip,\n innerRef,\n } = propsWithDefault;\n\n const handleClick = React.useCallback(() => {\n onClick(dsId, title);\n }, [dsId, onClick, title]);\n\n const MainContent = React.useMemo(\n () => (\n <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n <Icon size=\"m\" />\n {badge ? (\n <StyledStatusBadge\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n data-testid={`tile-badge-${dsId}`}\n />\n ) : null}\n </StyledTileButtonIcon>\n </Grid>\n {!isHeader ? (\n <Grid width=\"100%\" justifyContent=\"center\">\n {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n </Grid>\n ) : null}\n </StyledWrapperCentralContent>\n ),\n [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n );\n\n const Btn = React.useMemo(\n () => (\n <StyledTileButton\n key={dsId}\n isHeader={isHeader}\n value={dsId}\n data-testid={`tile-button-${dsId}`}\n data-key={dsId}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n disabled={disabled}\n selected={selected}\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n aria-pressed={selected}\n aria-label={ariaLabel}\n innerRef={innerRef}\n >\n <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n <span>{MainContent}</span>\n <StyledWrapperLeftBorder />\n {showClose && !disabled ? (\n <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`} aria-label=\"close\">\n <CloseXsmall />\n </CloseButton>\n ) : null}\n </StyledWrapper>\n </StyledTileButton>\n ),\n [\n MainContent,\n ariaLabel,\n badgeColor,\n badgePosition,\n disabled,\n dsId,\n handleClick,\n isHeader,\n onBlur,\n onClose,\n onFocus,\n selected,\n showClose,\n innerRef,\n ],\n );\n\n return title && !disableTooltip ? (\n <StyledTooltipV3ButtonWrapper>\n <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n {Btn}\n </DSTooltipV3>\n </StyledTooltipV3ButtonWrapper>\n ) : (\n Btn\n );\n};\n\nTileButton.displayName = DSChatTileButtonName;\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDb;AAtDV,mBAAkB;AAClB,8BAAuF;AACvF,wBAA4B;AAC5B,qBAAqB;AACrB,sBAA4B;AAC5B,oBAUO;AAEP,mCAAmD;AACnD,yCAAqC;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,uBAAmB,sDAAwD,OAAO,8CAAiB;AACzG,8DAA+B,kBAAkB,8CAAiB,uDAAoB;AAEtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,aAAAA,QAAM,YAAY,MAAM;AAC1C,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,MAAM,SAAS,KAAK,CAAC;AAEzB,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,6CAAC,6CAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,kDAAC,uBAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,uDAAC,sCAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,oDAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc,IAAI;AAAA;AAAA,QACjC,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,4CAAC,uBAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,4CAAC,uCAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe,IAAI;AAAA,QAChC,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,QAEA,uDAAC,+BAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,sDAAC,UAAM,uBAAY;AAAA,UACnB,4CAAC,yCAAwB;AAAA,UACxB,aAAa,CAAC,WACb,4CAAC,6BAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,IAAI,IAAI,cAAW,SAC5F,sDAAC,+BAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAxBK;AAAA,IAyBP;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,SAAS,CAAC,iBACf,4CAAC,8CACC,sDAAC,iCAAY,IAAI,+BAA+B,IAAI,IAAI,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n StyledTooltipV3ButtonWrapper,\n StyledTileButton,\n StyledTileButtonIcon,\n StyledTileButtonLabel,\n StyledWrapper,\n StyledWrapperLeftBorder,\n StyledStatusBadge,\n StyledWrapperCentralContent,\n CloseButton,\n} from './styled.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatTileT.InternalProps>(props, defaultTileButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\n\n const {\n label,\n title,\n dsId,\n onClick,\n onFocus,\n onBlur,\n Icon,\n showClose,\n onClose,\n badge,\n badgeColor,\n badgePosition,\n disabled,\n selected,\n isHeader,\n ariaLabel,\n tooltipPlacement,\n disableTooltip,\n innerRef,\n applyAriaDisabled,\n } = propsWithDefault;\n\n const handleClick = React.useCallback(() => {\n if (applyAriaDisabled) return;\n onClick(dsId, title);\n }, [dsId, onClick, title, applyAriaDisabled]);\n\n const MainContent = React.useMemo(\n () => (\n <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n <Icon size=\"m\" />\n {badge ? (\n <StyledStatusBadge\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n data-testid={`tile-badge-${dsId}`}\n />\n ) : null}\n </StyledTileButtonIcon>\n </Grid>\n {!isHeader ? (\n <Grid width=\"100%\" justifyContent=\"center\">\n {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n </Grid>\n ) : null}\n </StyledWrapperCentralContent>\n ),\n [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n );\n\n const Btn = React.useMemo(\n () => (\n <StyledTileButton\n key={dsId}\n isHeader={isHeader}\n value={dsId}\n data-testid={`tile-button-${dsId}`}\n data-key={dsId}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n disabled={disabled}\n selected={selected}\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n aria-pressed={selected}\n aria-label={ariaLabel}\n aria-disabled={applyAriaDisabled}\n innerRef={innerRef}\n >\n <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n <span>{MainContent}</span>\n <StyledWrapperLeftBorder />\n {showClose && !disabled ? (\n <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`} aria-label=\"close\">\n <CloseXsmall />\n </CloseButton>\n ) : null}\n </StyledWrapper>\n </StyledTileButton>\n ),\n [\n MainContent,\n ariaLabel,\n badgeColor,\n badgePosition,\n disabled,\n dsId,\n handleClick,\n isHeader,\n onBlur,\n onClose,\n onFocus,\n selected,\n showClose,\n innerRef,\n applyAriaDisabled,\n ],\n );\n\n return title && !disableTooltip ? (\n <StyledTooltipV3ButtonWrapper>\n <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n {Btn}\n </DSTooltipV3>\n </StyledTooltipV3ButtonWrapper>\n ) : (\n Btn\n );\n};\n\nTileButton.displayName = DSChatTileButtonName;\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Db;AAxDV,mBAAkB;AAClB,8BAAuF;AACvF,wBAA4B;AAC5B,qBAAqB;AACrB,sBAA4B;AAC5B,oBAUO;AAEP,mCAAmD;AACnD,yCAAqC;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,uBAAmB,sDAAwD,OAAO,8CAAiB;AACzG,8DAA+B,kBAAkB,8CAAiB,uDAAoB;AAEtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,aAAAA,QAAM,YAAY,MAAM;AAC1C,QAAI,kBAAmB;AACvB,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,MAAM,SAAS,OAAO,iBAAiB,CAAC;AAE5C,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,6CAAC,6CAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,kDAAC,uBAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,uDAAC,sCAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,oDAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc,IAAI;AAAA;AAAA,QACjC,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,4CAAC,uBAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,4CAAC,uCAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe,IAAI;AAAA,QAChC,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf;AAAA,QAEA,uDAAC,+BAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,sDAAC,UAAM,uBAAY;AAAA,UACnB,4CAAC,yCAAwB;AAAA,UACxB,aAAa,CAAC,WACb,4CAAC,6BAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,IAAI,IAAI,cAAW,SAC5F,sDAAC,+BAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAzBK;AAAA,IA0BP;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,SAAS,CAAC,iBACf,4CAAC,8CACC,sDAAC,iCAAY,IAAI,+BAA+B,IAAI,IAAI,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -51,7 +51,8 @@ const defaultTileButton = {
51
51
  isHeader: false,
52
52
  ariaLabel: "Tile button",
53
53
  tooltipPlacement: "right",
54
- disableTooltip: false
54
+ disableTooltip: false,
55
+ applyAriaDisabled: false
55
56
  };
56
57
  const propsTileButton = {
57
58
  Icon: import_ds_props_helpers.PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
@@ -87,6 +88,9 @@ const propsTileButton = {
87
88
  disableTooltip: import_ds_props_helpers.PropTypes.bool.description("Disable tooltip option").defaultValue(defaultTileButton.disableTooltip),
88
89
  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any })]).description(
89
90
  "reference to the component"
90
- )
91
+ ),
92
+ applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
93
+ "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
94
+ ).defaultValue(false)
91
95
  };
92
96
  //# sourceMappingURL=react-desc-prop-types.js.map
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Comments, type SvgIconT } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n type TooltipPlacementT =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n\n export interface DefaultProps {\n Icon: React.ComponentType<SvgIconT.Props>;\n dsId: string | number;\n label: string;\n onClick: (dsId: string | number, label: string) => void;\n title: string;\n showClose: boolean;\n badge: boolean;\n badgeColor: 'blue' | 'green';\n badgePosition: 'left' | 'right';\n disabled: boolean;\n selected: boolean;\n isHeader: boolean;\n ariaLabel: string;\n tooltipPlacement: TooltipPlacementT;\n disableTooltip: boolean;\n }\n\n export interface OptionalProps {\n onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps {}\n}\n\nexport const defaultTileButton: DSChatTileT.DefaultProps = {\n Icon: Comments,\n dsId: '',\n label: '',\n onClick: noop,\n title: '',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'left',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'right',\n disableTooltip: false,\n};\n\nexport const propsTileButton = {\n Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Unique id for the button')\n .defaultValue(defaultTileButton.dsId),\n label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n onFocus: PropTypes.func.description('The function to call when is focused'),\n onBlur: PropTypes.func.description('The function to call when is on blur'),\n onClose: PropTypes.func\n .description('The function to call when the X is Clicked')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n showClose: PropTypes.bool\n .description('It will display the X')\n .defaultValue(defaultTileButton.showClose)\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n badgeColor: PropTypes.oneOf(['blue', 'green'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgeColor),\n badgePosition: PropTypes.oneOf(['left', 'right'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgePosition),\n disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n tooltipPlacement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'right'\"),\n disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA0B;AAC1B,oBAAqB;AACrB,sBAAwC;AA+CjC,MAAM,oBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,kCAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,kCAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAChB,YAAY,4CAA4C,EACxD,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,kCAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,OAAO,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,kCAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,kCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Comments, type SvgIconT } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n type TooltipPlacementT =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n Icon: React.ComponentType<SvgIconT.Props>;\n dsId: string | number;\n label: string;\n onClick: (dsId: string | number, label: string) => void;\n title: string;\n showClose: boolean;\n badge: boolean;\n badgeColor: 'blue' | 'green';\n badgePosition: 'left' | 'right';\n disabled: boolean;\n selected: boolean;\n isHeader: boolean;\n ariaLabel: string;\n tooltipPlacement: TooltipPlacementT;\n disableTooltip: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultTileButton: DSChatTileT.DefaultProps = {\n Icon: Comments,\n dsId: '',\n label: '',\n onClick: noop,\n title: '',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'left',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'right',\n disableTooltip: false,\n applyAriaDisabled: false,\n};\n\nexport const propsTileButton = {\n Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Unique id for the button')\n .defaultValue(defaultTileButton.dsId),\n label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n onFocus: PropTypes.func.description('The function to call when is focused'),\n onBlur: PropTypes.func.description('The function to call when is on blur'),\n onClose: PropTypes.func\n .description('The function to call when the X is Clicked')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n showClose: PropTypes.bool\n .description('It will display the X')\n .defaultValue(defaultTileButton.showClose)\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n badgeColor: PropTypes.oneOf(['blue', 'green'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgeColor),\n badgePosition: PropTypes.oneOf(['left', 'right'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgePosition),\n disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n tooltipPlacement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'right'\"),\n disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA0B;AAC1B,oBAAqB;AACrB,sBAAwC;AAkDjC,MAAM,oBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,mBAAmB;AACrB;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,kCAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,kCAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAChB,YAAY,4CAA4C,EACxD,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,kCAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,OAAO,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,kCAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,kCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styled.js CHANGED
@@ -174,7 +174,8 @@ const StyledTileButton = import_ds_system.styled.button`
174
174
  &:focus,
175
175
  &:hover,
176
176
  &:active,
177
- &:disabled {
177
+ &:disabled,
178
+ &[aria-disabled='true'] {
178
179
  background: ${(props) => props.theme.colors.neutral["080"]};
179
180
  & ${StyledStatusBadge} {
180
181
  border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
@@ -212,7 +213,8 @@ const StyledTileButton = import_ds_system.styled.button`
212
213
  }
213
214
  }
214
215
 
215
- &:disabled {
216
+ &:disabled,
217
+ &[aria-disabled='true'] {
216
218
  background: ${(props) => props.theme.colors.neutral["080"]};
217
219
  ${StyledWrapperLeftBorder} {
218
220
  background: ${(props) => props.theme.colors.neutral["400"]};
package/dist/cjs/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n height: 100%;\n width: 4px;\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<DSChatTileT.Props>`\n height: 8px;\n width: 8px;\n position: absolute;\n top: 0;\n background: ${(props) => {\n switch (props.badgeColor) {\n case 'blue':\n return props.theme.colors.brand[600];\n case 'green':\n return props.theme.colors.success[900];\n default:\n return props.theme.colors.brand[600];\n }\n }};\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'left: -4px;';\n case 'right':\n return 'right: -4px;';\n default:\n return 'left: -4px;';\n }\n }};\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n margin-top: -2px;\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'margin-left: -2px;';\n case 'right':\n return 'margin-right: -2px;';\n default:\n return 'margin-left: -2px;';\n }\n }};\n border-radius: 50%;\n box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n width: 24px;\n height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n position: relative;\n height: 24px;\n width: 24px;\n svg {\n fill: ${(props) => props.theme.colors.neutral[600]};\n }\n\n &:focus {\n svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n width: 24px;\n height: ${(props) => props.theme.space.xs};\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n outline: none;\n background: none;\n height: 9px;\n width: 9px;\n position: absolute;\n top: 1px;\n right: 1px;\n overflow: hidden;\n padding: 0;\n border: none;\n span {\n position: absolute;\n left: -3px;\n top: -4px;\n }\n svg {\n fill: #000000;\n }\n &:focus,\n &:hover {\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:after {\n display: block;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: solid 1px ${(props) => props.theme.colors.brand[600]};\n border-radius: 2px;\n }\n }\n cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<DSChatTileT.Props>>`\n outline: none;\n background: ${(props) => props.theme.colors.neutral['050']};\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n position: relative;\n padding: 0;\n border: none;\n cursor: pointer;\n border-bottom: ${(props) => (props.isHeader ? `1px solid ${props.theme.colors.neutral['200']}` : 'none')};\n &:focus,\n &:hover,\n &:active,\n &:disabled {\n background: ${(props) => props.theme.colors.neutral['080']};\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n }\n\n &:focus,\n &:hover {\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[800]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n }\n\n & svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n\n &:active:not(:disabled) {\n background: ${(props) => props.theme.colors.neutral['050']};\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n font-weight: 600;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n }\n }\n\n &:disabled {\n background: ${(props) => props.theme.colors.neutral['080']};\n ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.neutral['400']};\n }\n & ${StyledStatusBadge} {\n background: ${(props) => props.theme.colors.neutral['500']};\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n ${StyledTileButtonIcon} {\n svg {\n fill: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n\n ${(props) => {\n if (props.selected) {\n return `\n & ${StyledWrapperLeftBorder} {\n background: ${props.theme.colors.brand[600]};\n }\n `;\n }\n return '';\n }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n height: 100%;\n width: 100%;\n position: relative;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n height: 100%;\n width: 4px;\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<DSChatTileT.Props>`\n height: 8px;\n width: 8px;\n position: absolute;\n top: 0;\n background: ${(props) => {\n switch (props.badgeColor) {\n case 'blue':\n return props.theme.colors.brand[600];\n case 'green':\n return props.theme.colors.success[900];\n default:\n return props.theme.colors.brand[600];\n }\n }};\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'left: -4px;';\n case 'right':\n return 'right: -4px;';\n default:\n return 'left: -4px;';\n }\n }};\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n margin-top: -2px;\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'margin-left: -2px;';\n case 'right':\n return 'margin-right: -2px;';\n default:\n return 'margin-left: -2px;';\n }\n }};\n border-radius: 50%;\n box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n width: 24px;\n height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n position: relative;\n height: 24px;\n width: 24px;\n svg {\n fill: ${(props) => props.theme.colors.neutral[600]};\n }\n\n &:focus {\n svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n width: 24px;\n height: ${(props) => props.theme.space.xs};\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n outline: none;\n background: none;\n height: 9px;\n width: 9px;\n position: absolute;\n top: 1px;\n right: 1px;\n overflow: hidden;\n padding: 0;\n border: none;\n span {\n position: absolute;\n left: -3px;\n top: -4px;\n }\n svg {\n fill: #000000;\n }\n &:focus,\n &:hover {\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:after {\n display: block;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: solid 1px ${(props) => props.theme.colors.brand[600]};\n border-radius: 2px;\n }\n }\n cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<DSChatTileT.Props>>`\n outline: none;\n background: ${(props) => props.theme.colors.neutral['050']};\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n position: relative;\n padding: 0;\n border: none;\n cursor: pointer;\n border-bottom: ${(props) => (props.isHeader ? `1px solid ${props.theme.colors.neutral['200']}` : 'none')};\n &:focus,\n &:hover,\n &:active,\n &:disabled,\n &[aria-disabled='true'] {\n background: ${(props) => props.theme.colors.neutral['080']};\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n }\n\n &:focus,\n &:hover {\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[800]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n }\n\n & svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n\n &:active:not(:disabled) {\n background: ${(props) => props.theme.colors.neutral['050']};\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n font-weight: 600;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n }\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n background: ${(props) => props.theme.colors.neutral['080']};\n ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.neutral['400']};\n }\n & ${StyledStatusBadge} {\n background: ${(props) => props.theme.colors.neutral['500']};\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n ${StyledTileButtonIcon} {\n svg {\n fill: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n\n ${(props) => {\n if (props.selected) {\n return `\n & ${StyledWrapperLeftBorder} {\n background: ${props.theme.colors.brand[600]};\n }\n `;\n }\n return '';\n }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n height: 100%;\n width: 100%;\n position: relative;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/typescript-testing/typescript-chat-card-valid.js CHANGED
@@ -25,9 +25,10 @@ var React = __toESM(require("react"));
25
25
  var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import_react = require("react");
27
27
  var import_lodash = require("lodash");
28
- var import__ = require("../index.js");
29
28
  var import_ds_icons = require("@elliemae/ds-icons");
29
+ var import__ = require("../index.js");
30
30
  const ref = (0, import_react.createRef)();
31
+ const testRequiredProps = {};
31
32
  const testOptionalProps = {
32
33
  onBlur: import_lodash.noop,
33
34
  onFocus: import_lodash.noop,
@@ -41,10 +42,12 @@ const testPartialDefaults = {
41
42
  title: "Title"
42
43
  };
43
44
  const testProps = {
45
+ ...testRequiredProps,
44
46
  ...testOptionalProps,
45
47
  ...testPartialDefaults
46
48
  };
47
49
  const testPropsAsSyntax = {
50
+ ...testRequiredProps,
48
51
  ...testOptionalProps,
49
52
  ...testPartialDefaults
50
53
  };
@@ -63,13 +66,16 @@ const testCompleteDefaults = {
63
66
  isHeader: false,
64
67
  ariaLabel: "Tile button",
65
68
  tooltipPlacement: "top",
66
- disableTooltip: false
69
+ disableTooltip: false,
70
+ applyAriaDisabled: false
67
71
  };
68
72
  const testInternalProps = {
73
+ ...testRequiredProps,
69
74
  ...testOptionalProps,
70
75
  ...testCompleteDefaults
71
76
  };
72
77
  const testInternalPropsAsSyntax = {
78
+ ...testRequiredProps,
73
79
  ...testOptionalProps,
74
80
  ...testCompleteDefaults
75
81
  };
@@ -92,7 +98,8 @@ const testExplicitDefinition = {
92
98
  onBlur: import_lodash.noop,
93
99
  onFocus: import_lodash.noop,
94
100
  onClose: import_lodash.noop,
95
- innerRef: ref
101
+ innerRef: ref,
102
+ applyAriaDisabled: false
96
103
  };
97
104
  const testInferedTypeCompatibility = {
98
105
  Icon: import_ds_icons.Comments,
@@ -113,7 +120,8 @@ const testInferedTypeCompatibility = {
113
120
  onBlur: import_lodash.noop,
114
121
  onFocus: import_lodash.noop,
115
122
  onClose: import_lodash.noop,
116
- innerRef: ref
123
+ innerRef: ref,
124
+ applyAriaDisabled: false
117
125
  };
118
126
  const testDefinitionAsConst = {
119
127
  Icon: import_ds_icons.Comments,
@@ -134,7 +142,8 @@ const testDefinitionAsConst = {
134
142
  onBlur: import_lodash.noop,
135
143
  onFocus: import_lodash.noop,
136
144
  onClose: import_lodash.noop,
137
- innerRef: ref
145
+ innerRef: ref,
146
+ applyAriaDisabled: false
138
147
  };
139
148
  const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
140
149
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.TileButton, { ...testExplicitDefinition }),
@@ -161,7 +170,8 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
161
170
  onBlur: import_lodash.noop,
162
171
  onFocus: import_lodash.noop,
163
172
  onClose: import_lodash.noop,
164
- innerRef: ref
173
+ innerRef: ref,
174
+ applyAriaDisabled: false
165
175
  }
166
176
  )
167
177
  ] });
package/dist/cjs/typescript-testing/typescript-chat-card-valid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chat-card-valid.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { noop } from 'lodash';\nimport { TileButton } from '../index.js';\nimport { Comments } from '@elliemae/ds-icons';\nimport type { DSChatTileT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatTileT.Props;\ntype ComponentPropsInternals = DSChatTileT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatTileT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatTileT.OptionalProps;\n\nconst ref = createRef() as React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n title: 'Title',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <TileButton {...testExplicitDefinition} />\n <TileButton {...testInferedTypeCompatibility} />\n <TileButton {...testDefinitionAsConst} />\n {/* works with inline values */}\n <TileButton\n Icon={Comments}\n dsId=\"id-1\"\n label=\"AB\"\n onClick={noop}\n title=\"Title\"\n showClose={false}\n badge={false}\n badgeColor=\"blue\"\n badgePosition=\"right\"\n disabled={false}\n selected={false}\n isHeader={false}\n ariaLabel=\"Tile button\"\n tooltipPlacement=\"top\"\n disableTooltip={false}\n onBlur={noop}\n onFocus={noop}\n onClose={noop}\n innerRef={ref}\n />\n </>\n);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { noop } from 'lodash';\nimport { Comments } from '@elliemae/ds-icons';\nimport { TileButton } from '../index.js';\nimport type { DSChatTileT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatTileT.Props;\ntype ComponentPropsInternals = DSChatTileT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatTileT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatTileT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChatTileT.RequiredProps;\n\nconst ref = createRef() as React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n title: 'Title',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n applyAriaDisabled: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <TileButton {...testExplicitDefinition} />\n <TileButton {...testInferedTypeCompatibility} />\n <TileButton {...testDefinitionAsConst} />\n {/* works with inline values */}\n <TileButton\n Icon={Comments}\n dsId=\"id-1\"\n label=\"AB\"\n onClick={noop}\n title=\"Title\"\n showClose={false}\n badge={false}\n badgeColor=\"blue\"\n badgePosition=\"right\"\n disabled={false}\n selected={false}\n isHeader={false}\n ariaLabel=\"Tile button\"\n tooltipPlacement=\"top\"\n disableTooltip={false}\n onBlur={noop}\n onFocus={noop}\n onClose={noop}\n innerRef={ref}\n applyAriaDisabled={false}\n />\n </>\n);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/TileButton.js CHANGED
@@ -40,11 +40,13 @@ const TileButton = (props) => {
40
40
  ariaLabel,
41
41
  tooltipPlacement,
42
42
  disableTooltip,
43
- innerRef
43
+ innerRef,
44
+ applyAriaDisabled
44
45
  } = propsWithDefault;
45
46
  const handleClick = React2.useCallback(() => {
47
+ if (applyAriaDisabled) return;
46
48
  onClick(dsId, title);
47
- }, [dsId, onClick, title]);
49
+ }, [dsId, onClick, title, applyAriaDisabled]);
48
50
  const MainContent = React2.useMemo(
49
51
  () => /* @__PURE__ */ jsxs(StyledWrapperCentralContent, { alignItems: isHeader ? "center" : void 0, children: [
50
52
  /* @__PURE__ */ jsx(Grid, { width: "100%", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(StyledTileButtonIcon, { alignItems: "center", justifyContent: "center", children: [
@@ -79,6 +81,7 @@ const TileButton = (props) => {
79
81
  badgePosition,
80
82
  "aria-pressed": selected,
81
83
  "aria-label": ariaLabel,
84
+ "aria-disabled": applyAriaDisabled,
82
85
  innerRef,
83
86
  children: /* @__PURE__ */ jsxs(StyledWrapper, { alignItems: "center", justifyContent: "center", children: [
84
87
  /* @__PURE__ */ jsx("span", { children: MainContent }),
@@ -102,7 +105,8 @@ const TileButton = (props) => {
102
105
  onFocus,
103
106
  selected,
104
107
  showClose,
105
- innerRef
108
+ innerRef,
109
+ applyAriaDisabled
106
110
  ]
107
111
  );
108
112
  return title && !disableTooltip ? /* @__PURE__ */ jsx(StyledTooltipV3ButtonWrapper, { children: /* @__PURE__ */ jsx(DSTooltipV3, { id: `ds-chat-tile-tooltip-button-${dsId}`, text: title, startPlacementPreference: tooltipPlacement, children: Btn }) }) : Btn;
package/dist/esm/TileButton.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TileButton.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n StyledTooltipV3ButtonWrapper,\n StyledTileButton,\n StyledTileButtonIcon,\n StyledTileButtonLabel,\n StyledWrapper,\n StyledWrapperLeftBorder,\n StyledStatusBadge,\n StyledWrapperCentralContent,\n CloseButton,\n} from './styled.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatTileT.InternalProps>(props, defaultTileButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\n\n const {\n label,\n title,\n dsId,\n onClick,\n onFocus,\n onBlur,\n Icon,\n showClose,\n onClose,\n badge,\n badgeColor,\n badgePosition,\n disabled,\n selected,\n isHeader,\n ariaLabel,\n tooltipPlacement,\n disableTooltip,\n innerRef,\n } = propsWithDefault;\n\n const handleClick = React.useCallback(() => {\n onClick(dsId, title);\n }, [dsId, onClick, title]);\n\n const MainContent = React.useMemo(\n () => (\n <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n <Icon size=\"m\" />\n {badge ? (\n <StyledStatusBadge\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n data-testid={`tile-badge-${dsId}`}\n />\n ) : null}\n </StyledTileButtonIcon>\n </Grid>\n {!isHeader ? (\n <Grid width=\"100%\" justifyContent=\"center\">\n {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n </Grid>\n ) : null}\n </StyledWrapperCentralContent>\n ),\n [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n );\n\n const Btn = React.useMemo(\n () => (\n <StyledTileButton\n key={dsId}\n isHeader={isHeader}\n value={dsId}\n data-testid={`tile-button-${dsId}`}\n data-key={dsId}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n disabled={disabled}\n selected={selected}\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n aria-pressed={selected}\n aria-label={ariaLabel}\n innerRef={innerRef}\n >\n <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n <span>{MainContent}</span>\n <StyledWrapperLeftBorder />\n {showClose && !disabled ? (\n <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`} aria-label=\"close\">\n <CloseXsmall />\n </CloseButton>\n ) : null}\n </StyledWrapper>\n </StyledTileButton>\n ),\n [\n MainContent,\n ariaLabel,\n badgeColor,\n badgePosition,\n disabled,\n dsId,\n handleClick,\n isHeader,\n onBlur,\n onClose,\n onFocus,\n selected,\n showClose,\n innerRef,\n ],\n );\n\n return title && !disableTooltip ? (\n <StyledTooltipV3ButtonWrapper>\n <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n {Btn}\n </DSTooltipV3>\n </StyledTooltipV3ButtonWrapper>\n ) : (\n Btn\n );\n};\n\nTileButton.displayName = DSChatTileButtonName;\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACwDb,SACE,KADF;AAtDV,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,4BAA4B;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,mBAAmB,6BAAwD,OAAO,iBAAiB;AACzG,iCAA+B,kBAAkB,iBAAiB,oBAAoB;AAEtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAcA,OAAM,YAAY,MAAM;AAC1C,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,MAAM,SAAS,KAAK,CAAC;AAEzB,QAAM,cAAcA,OAAM;AAAA,IACxB,MACE,qBAAC,+BAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,0BAAC,QAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,+BAAC,wBAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,4BAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc,IAAI;AAAA;AAAA,QACjC,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,oBAAC,QAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,oBAAC,yBAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAMA,OAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe,IAAI;AAAA,QAChC,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,QAEA,+BAAC,iBAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,8BAAC,UAAM,uBAAY;AAAA,UACnB,oBAAC,2BAAwB;AAAA,UACxB,aAAa,CAAC,WACb,oBAAC,eAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,IAAI,IAAI,cAAW,SAC5F,8BAAC,eAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAxBK;AAAA,IAyBP;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,SAAS,CAAC,iBACf,oBAAC,gCACC,8BAAC,eAAY,IAAI,+BAA+B,IAAI,IAAI,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n StyledTooltipV3ButtonWrapper,\n StyledTileButton,\n StyledTileButtonIcon,\n StyledTileButtonLabel,\n StyledWrapper,\n StyledWrapperLeftBorder,\n StyledStatusBadge,\n StyledWrapperCentralContent,\n CloseButton,\n} from './styled.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatTileT.InternalProps>(props, defaultTileButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\n\n const {\n label,\n title,\n dsId,\n onClick,\n onFocus,\n onBlur,\n Icon,\n showClose,\n onClose,\n badge,\n badgeColor,\n badgePosition,\n disabled,\n selected,\n isHeader,\n ariaLabel,\n tooltipPlacement,\n disableTooltip,\n innerRef,\n applyAriaDisabled,\n } = propsWithDefault;\n\n const handleClick = React.useCallback(() => {\n if (applyAriaDisabled) return;\n onClick(dsId, title);\n }, [dsId, onClick, title, applyAriaDisabled]);\n\n const MainContent = React.useMemo(\n () => (\n <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n <Icon size=\"m\" />\n {badge ? (\n <StyledStatusBadge\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n data-testid={`tile-badge-${dsId}`}\n />\n ) : null}\n </StyledTileButtonIcon>\n </Grid>\n {!isHeader ? (\n <Grid width=\"100%\" justifyContent=\"center\">\n {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n </Grid>\n ) : null}\n </StyledWrapperCentralContent>\n ),\n [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n );\n\n const Btn = React.useMemo(\n () => (\n <StyledTileButton\n key={dsId}\n isHeader={isHeader}\n value={dsId}\n data-testid={`tile-button-${dsId}`}\n data-key={dsId}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n disabled={disabled}\n selected={selected}\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n aria-pressed={selected}\n aria-label={ariaLabel}\n aria-disabled={applyAriaDisabled}\n innerRef={innerRef}\n >\n <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n <span>{MainContent}</span>\n <StyledWrapperLeftBorder />\n {showClose && !disabled ? (\n <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`} aria-label=\"close\">\n <CloseXsmall />\n </CloseButton>\n ) : null}\n </StyledWrapper>\n </StyledTileButton>\n ),\n [\n MainContent,\n ariaLabel,\n badgeColor,\n badgePosition,\n disabled,\n dsId,\n handleClick,\n isHeader,\n onBlur,\n onClose,\n onFocus,\n selected,\n showClose,\n innerRef,\n applyAriaDisabled,\n ],\n );\n\n return title && !disableTooltip ? (\n <StyledTooltipV3ButtonWrapper>\n <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n {Btn}\n </DSTooltipV3>\n </StyledTooltipV3ButtonWrapper>\n ) : (\n Btn\n );\n};\n\nTileButton.displayName = DSChatTileButtonName;\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -17,7 +17,8 @@ const defaultTileButton = {
17
17
  isHeader: false,
18
18
  ariaLabel: "Tile button",
19
19
  tooltipPlacement: "right",
20
- disableTooltip: false
20
+ disableTooltip: false,
21
+ applyAriaDisabled: false
21
22
  };
22
23
  const propsTileButton = {
23
24
  Icon: PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
@@ -53,7 +54,10 @@ const propsTileButton = {
53
54
  disableTooltip: PropTypes.bool.description("Disable tooltip option").defaultValue(defaultTileButton.disableTooltip),
54
55
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
55
56
  "reference to the component"
56
- )
57
+ ),
58
+ applyAriaDisabled: PropTypes.bool.description(
59
+ "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
60
+ ).defaultValue(false)
57
61
  };
58
62
  export {
59
63
  defaultTileButton,
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Comments, type SvgIconT } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n type TooltipPlacementT =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n\n export interface DefaultProps {\n Icon: React.ComponentType<SvgIconT.Props>;\n dsId: string | number;\n label: string;\n onClick: (dsId: string | number, label: string) => void;\n title: string;\n showClose: boolean;\n badge: boolean;\n badgeColor: 'blue' | 'green';\n badgePosition: 'left' | 'right';\n disabled: boolean;\n selected: boolean;\n isHeader: boolean;\n ariaLabel: string;\n tooltipPlacement: TooltipPlacementT;\n disableTooltip: boolean;\n }\n\n export interface OptionalProps {\n onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps {}\n}\n\nexport const defaultTileButton: DSChatTileT.DefaultProps = {\n Icon: Comments,\n dsId: '',\n label: '',\n onClick: noop,\n title: '',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'left',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'right',\n disableTooltip: false,\n};\n\nexport const propsTileButton = {\n Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Unique id for the button')\n .defaultValue(defaultTileButton.dsId),\n label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n onFocus: PropTypes.func.description('The function to call when is focused'),\n onBlur: PropTypes.func.description('The function to call when is on blur'),\n onClose: PropTypes.func\n .description('The function to call when the X is Clicked')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n showClose: PropTypes.bool\n .description('It will display the X')\n .defaultValue(defaultTileButton.showClose)\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n badgeColor: PropTypes.oneOf(['blue', 'green'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgeColor),\n badgePosition: PropTypes.oneOf(['left', 'right'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgePosition),\n disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n tooltipPlacement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'right'\"),\n disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,gBAA+B;AA+CjC,MAAM,oBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,UAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,QAAQ,UAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,UAAU,KAChB,YAAY,4CAA4C,EACxD,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,UAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,OAAO,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,UAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Comments, type SvgIconT } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n type TooltipPlacementT =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n Icon: React.ComponentType<SvgIconT.Props>;\n dsId: string | number;\n label: string;\n onClick: (dsId: string | number, label: string) => void;\n title: string;\n showClose: boolean;\n badge: boolean;\n badgeColor: 'blue' | 'green';\n badgePosition: 'left' | 'right';\n disabled: boolean;\n selected: boolean;\n isHeader: boolean;\n ariaLabel: string;\n tooltipPlacement: TooltipPlacementT;\n disableTooltip: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultTileButton: DSChatTileT.DefaultProps = {\n Icon: Comments,\n dsId: '',\n label: '',\n onClick: noop,\n title: '',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'left',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'right',\n disableTooltip: false,\n applyAriaDisabled: false,\n};\n\nexport const propsTileButton = {\n Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Unique id for the button')\n .defaultValue(defaultTileButton.dsId),\n label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n onFocus: PropTypes.func.description('The function to call when is focused'),\n onBlur: PropTypes.func.description('The function to call when is on blur'),\n onClose: PropTypes.func\n .description('The function to call when the X is Clicked')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n showClose: PropTypes.bool\n .description('It will display the X')\n .defaultValue(defaultTileButton.showClose)\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n badgeColor: PropTypes.oneOf(['blue', 'green'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgeColor),\n badgePosition: PropTypes.oneOf(['left', 'right'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgePosition),\n disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n tooltipPlacement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'right'\"),\n disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,gBAA+B;AAkDjC,MAAM,oBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,mBAAmB;AACrB;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,UAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,QAAQ,UAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,UAAU,KAChB,YAAY,4CAA4C,EACxD,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,UAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,OAAO,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,UAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
6
6
  "names": []
7
7
  }
package/dist/esm/styled.js CHANGED
@@ -133,7 +133,8 @@ const StyledTileButton = styled.button`
133
133
  &:focus,
134
134
  &:hover,
135
135
  &:active,
136
- &:disabled {
136
+ &:disabled,
137
+ &[aria-disabled='true'] {
137
138
  background: ${(props) => props.theme.colors.neutral["080"]};
138
139
  & ${StyledStatusBadge} {
139
140
  border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
@@ -171,7 +172,8 @@ const StyledTileButton = styled.button`
171
172
  }
172
173
  }
173
174
 
174
- &:disabled {
175
+ &:disabled,
176
+ &[aria-disabled='true'] {
175
177
  background: ${(props) => props.theme.colors.neutral["080"]};
176
178
  ${StyledWrapperLeftBorder} {
177
179
  background: ${(props) => props.theme.colors.neutral["400"]};
package/dist/esm/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n height: 100%;\n width: 4px;\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<DSChatTileT.Props>`\n height: 8px;\n width: 8px;\n position: absolute;\n top: 0;\n background: ${(props) => {\n switch (props.badgeColor) {\n case 'blue':\n return props.theme.colors.brand[600];\n case 'green':\n return props.theme.colors.success[900];\n default:\n return props.theme.colors.brand[600];\n }\n }};\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'left: -4px;';\n case 'right':\n return 'right: -4px;';\n default:\n return 'left: -4px;';\n }\n }};\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n margin-top: -2px;\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'margin-left: -2px;';\n case 'right':\n return 'margin-right: -2px;';\n default:\n return 'margin-left: -2px;';\n }\n }};\n border-radius: 50%;\n box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n width: 24px;\n height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n position: relative;\n height: 24px;\n width: 24px;\n svg {\n fill: ${(props) => props.theme.colors.neutral[600]};\n }\n\n &:focus {\n svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n width: 24px;\n height: ${(props) => props.theme.space.xs};\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n outline: none;\n background: none;\n height: 9px;\n width: 9px;\n position: absolute;\n top: 1px;\n right: 1px;\n overflow: hidden;\n padding: 0;\n border: none;\n span {\n position: absolute;\n left: -3px;\n top: -4px;\n }\n svg {\n fill: #000000;\n }\n &:focus,\n &:hover {\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:after {\n display: block;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: solid 1px ${(props) => props.theme.colors.brand[600]};\n border-radius: 2px;\n }\n }\n cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<DSChatTileT.Props>>`\n outline: none;\n background: ${(props) => props.theme.colors.neutral['050']};\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n position: relative;\n padding: 0;\n border: none;\n cursor: pointer;\n border-bottom: ${(props) => (props.isHeader ? `1px solid ${props.theme.colors.neutral['200']}` : 'none')};\n &:focus,\n &:hover,\n &:active,\n &:disabled {\n background: ${(props) => props.theme.colors.neutral['080']};\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n }\n\n &:focus,\n &:hover {\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[800]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n }\n\n & svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n\n &:active:not(:disabled) {\n background: ${(props) => props.theme.colors.neutral['050']};\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n font-weight: 600;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n }\n }\n\n &:disabled {\n background: ${(props) => props.theme.colors.neutral['080']};\n ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.neutral['400']};\n }\n & ${StyledStatusBadge} {\n background: ${(props) => props.theme.colors.neutral['500']};\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n ${StyledTileButtonIcon} {\n svg {\n fill: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n\n ${(props) => {\n if (props.selected) {\n return `\n & ${StyledWrapperLeftBorder} {\n background: ${props.theme.colors.brand[600]};\n }\n `;\n }\n return '';\n }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n height: 100%;\n width: 100%;\n position: relative;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAGvB,MAAM,0BAA0B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,UAAU;AACvB,UAAQ,MAAM,YAAY;AAAA,IACxB,KAAK;AACH,aAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IACrC,KAAK;AACH,aAAO,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACvC;AACE,aAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,EACvC;AACF,CAAC;AAAA,IACC,CAAC,UAAU;AACX,UAAQ,MAAM,eAAe;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF,CAAC;AAAA,sBACmB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,IAE9D,CAAC,UAAU;AACX,UAAQ,MAAM,eAAe;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF,CAAC;AAAA;AAAA;AAAA;AAKI,MAAM,8BAA8B,OAAO,IAAI;AAAA;AAAA;AAAA;AAK/C,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,YAKnC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,cAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAK/C,MAAM,wBAAwB,OAAO;AAAA;AAAA,YAEhC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKhC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI9C,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAsBpB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU5B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3D,MAAM,+BAA+B,OAAO;AAAA,YACvC,qBAAqB;AAAA,WACtB,iBAAiB;AAAA;AAErB,MAAM,mBAAmB,OAAO;AAAA;AAAA,gBAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,YAChD,qBAAqB;AAAA,WACtB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKT,CAAC,UAAW,MAAM,WAAW,cAAc,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,KAAK,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKzF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,QACtD,iBAAiB;AAAA,0BACC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAM9D,uBAAuB;AAAA,oBACX,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,QAEpD,qBAAqB;AAAA,eACd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,cAI3C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,QACtD,uBAAuB;AAAA,oBACX,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,QAEpD,qBAAqB;AAAA,eACd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,cAI3C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,QAE9C,iBAAiB;AAAA,0BACC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKpD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,MACxD,uBAAuB;AAAA,oBACT,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,QAExD,iBAAiB;AAAA,oBACL,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,0BACtC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAEhE,oBAAoB;AAAA;AAAA,gBAEV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,MAGpD,qBAAqB;AAAA,eACZ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIrD,CAAC,UAAU;AACX,MAAI,MAAM,UAAU;AAClB,WAAO;AAAA,YACD,uBAAuB;AAAA,wBACX,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,EAGjD;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n height: 100%;\n width: 4px;\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<DSChatTileT.Props>`\n height: 8px;\n width: 8px;\n position: absolute;\n top: 0;\n background: ${(props) => {\n switch (props.badgeColor) {\n case 'blue':\n return props.theme.colors.brand[600];\n case 'green':\n return props.theme.colors.success[900];\n default:\n return props.theme.colors.brand[600];\n }\n }};\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'left: -4px;';\n case 'right':\n return 'right: -4px;';\n default:\n return 'left: -4px;';\n }\n }};\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n margin-top: -2px;\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'margin-left: -2px;';\n case 'right':\n return 'margin-right: -2px;';\n default:\n return 'margin-left: -2px;';\n }\n }};\n border-radius: 50%;\n box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n width: 24px;\n height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n position: relative;\n height: 24px;\n width: 24px;\n svg {\n fill: ${(props) => props.theme.colors.neutral[600]};\n }\n\n &:focus {\n svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n width: 24px;\n height: ${(props) => props.theme.space.xs};\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n outline: none;\n background: none;\n height: 9px;\n width: 9px;\n position: absolute;\n top: 1px;\n right: 1px;\n overflow: hidden;\n padding: 0;\n border: none;\n span {\n position: absolute;\n left: -3px;\n top: -4px;\n }\n svg {\n fill: #000000;\n }\n &:focus,\n &:hover {\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:after {\n display: block;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: solid 1px ${(props) => props.theme.colors.brand[600]};\n border-radius: 2px;\n }\n }\n cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<DSChatTileT.Props>>`\n outline: none;\n background: ${(props) => props.theme.colors.neutral['050']};\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n position: relative;\n padding: 0;\n border: none;\n cursor: pointer;\n border-bottom: ${(props) => (props.isHeader ? `1px solid ${props.theme.colors.neutral['200']}` : 'none')};\n &:focus,\n &:hover,\n &:active,\n &:disabled,\n &[aria-disabled='true'] {\n background: ${(props) => props.theme.colors.neutral['080']};\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n }\n\n &:focus,\n &:hover {\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[800]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n }\n\n & svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n\n &:active:not(:disabled) {\n background: ${(props) => props.theme.colors.neutral['050']};\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n font-weight: 600;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n }\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n background: ${(props) => props.theme.colors.neutral['080']};\n ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.neutral['400']};\n }\n & ${StyledStatusBadge} {\n background: ${(props) => props.theme.colors.neutral['500']};\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n ${StyledTileButtonIcon} {\n svg {\n fill: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n\n ${(props) => {\n if (props.selected) {\n return `\n & ${StyledWrapperLeftBorder} {\n background: ${props.theme.colors.brand[600]};\n }\n `;\n }\n return '';\n }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n height: 100%;\n width: 100%;\n position: relative;\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/typescript-testing/typescript-chat-card-valid.js CHANGED
@@ -2,9 +2,10 @@ import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import { createRef } from "react";
4
4
  import { noop } from "lodash";
5
- import { TileButton } from "../index.js";
6
5
  import { Comments } from "@elliemae/ds-icons";
6
+ import { TileButton } from "../index.js";
7
7
  const ref = createRef();
8
+ const testRequiredProps = {};
8
9
  const testOptionalProps = {
9
10
  onBlur: noop,
10
11
  onFocus: noop,
@@ -18,10 +19,12 @@ const testPartialDefaults = {
18
19
  title: "Title"
19
20
  };
20
21
  const testProps = {
22
+ ...testRequiredProps,
21
23
  ...testOptionalProps,
22
24
  ...testPartialDefaults
23
25
  };
24
26
  const testPropsAsSyntax = {
27
+ ...testRequiredProps,
25
28
  ...testOptionalProps,
26
29
  ...testPartialDefaults
27
30
  };
@@ -40,13 +43,16 @@ const testCompleteDefaults = {
40
43
  isHeader: false,
41
44
  ariaLabel: "Tile button",
42
45
  tooltipPlacement: "top",
43
- disableTooltip: false
46
+ disableTooltip: false,
47
+ applyAriaDisabled: false
44
48
  };
45
49
  const testInternalProps = {
50
+ ...testRequiredProps,
46
51
  ...testOptionalProps,
47
52
  ...testCompleteDefaults
48
53
  };
49
54
  const testInternalPropsAsSyntax = {
55
+ ...testRequiredProps,
50
56
  ...testOptionalProps,
51
57
  ...testCompleteDefaults
52
58
  };
@@ -69,7 +75,8 @@ const testExplicitDefinition = {
69
75
  onBlur: noop,
70
76
  onFocus: noop,
71
77
  onClose: noop,
72
- innerRef: ref
78
+ innerRef: ref,
79
+ applyAriaDisabled: false
73
80
  };
74
81
  const testInferedTypeCompatibility = {
75
82
  Icon: Comments,
@@ -90,7 +97,8 @@ const testInferedTypeCompatibility = {
90
97
  onBlur: noop,
91
98
  onFocus: noop,
92
99
  onClose: noop,
93
- innerRef: ref
100
+ innerRef: ref,
101
+ applyAriaDisabled: false
94
102
  };
95
103
  const testDefinitionAsConst = {
96
104
  Icon: Comments,
@@ -111,7 +119,8 @@ const testDefinitionAsConst = {
111
119
  onBlur: noop,
112
120
  onFocus: noop,
113
121
  onClose: noop,
114
- innerRef: ref
122
+ innerRef: ref,
123
+ applyAriaDisabled: false
115
124
  };
116
125
  const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
117
126
  /* @__PURE__ */ jsx(TileButton, { ...testExplicitDefinition }),
@@ -138,7 +147,8 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
138
147
  onBlur: noop,
139
148
  onFocus: noop,
140
149
  onClose: noop,
141
- innerRef: ref
150
+ innerRef: ref,
151
+ applyAriaDisabled: false
142
152
  }
143
153
  )
144
154
  ] });
package/dist/esm/typescript-testing/typescript-chat-card-valid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chat-card-valid.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { noop } from 'lodash';\nimport { TileButton } from '../index.js';\nimport { Comments } from '@elliemae/ds-icons';\nimport type { DSChatTileT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatTileT.Props;\ntype ComponentPropsInternals = DSChatTileT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatTileT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatTileT.OptionalProps;\n\nconst ref = createRef() as React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n title: 'Title',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <TileButton {...testExplicitDefinition} />\n <TileButton {...testInferedTypeCompatibility} />\n <TileButton {...testDefinitionAsConst} />\n {/* works with inline values */}\n <TileButton\n Icon={Comments}\n dsId=\"id-1\"\n label=\"AB\"\n onClick={noop}\n title=\"Title\"\n showClose={false}\n badge={false}\n badgeColor=\"blue\"\n badgePosition=\"right\"\n disabled={false}\n selected={false}\n isHeader={false}\n ariaLabel=\"Tile button\"\n tooltipPlacement=\"top\"\n disableTooltip={false}\n onBlur={noop}\n onFocus={noop}\n onClose={noop}\n innerRef={ref}\n />\n </>\n);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { noop } from 'lodash';\nimport { Comments } from '@elliemae/ds-icons';\nimport { TileButton } from '../index.js';\nimport type { DSChatTileT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatTileT.Props;\ntype ComponentPropsInternals = DSChatTileT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatTileT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatTileT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChatTileT.RequiredProps;\n\nconst ref = createRef() as React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n title: 'Title',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n applyAriaDisabled: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n Icon: Comments,\n dsId: 'id-1',\n label: 'AB',\n onClick: noop,\n title: 'Title',\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'right',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'top',\n disableTooltip: false,\n onBlur: noop,\n onFocus: noop,\n onClose: noop,\n innerRef: ref,\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <TileButton {...testExplicitDefinition} />\n <TileButton {...testInferedTypeCompatibility} />\n <TileButton {...testDefinitionAsConst} />\n {/* works with inline values */}\n <TileButton\n Icon={Comments}\n dsId=\"id-1\"\n label=\"AB\"\n onClick={noop}\n title=\"Title\"\n showClose={false}\n badge={false}\n badgeColor=\"blue\"\n badgePosition=\"right\"\n disabled={false}\n selected={false}\n isHeader={false}\n ariaLabel=\"Tile button\"\n tooltipPlacement=\"top\"\n disableTooltip={false}\n onBlur={noop}\n onFocus={noop}\n onClose={noop}\n innerRef={ref}\n applyAriaDisabled={false}\n />\n </>\n);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/types/react-desc-prop-types.d.ts CHANGED
@@ -2,6 +2,8 @@ import type React from 'react';
2
2
  import { type SvgIconT } from '@elliemae/ds-icons';
3
3
  export declare namespace DSChatTileT {
4
4
  type TooltipPlacementT = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
5
+ interface RequiredProps {
6
+ }
5
7
  interface DefaultProps {
6
8
  Icon: React.ComponentType<SvgIconT.Props>;
7
9
  dsId: string | number;
@@ -18,6 +20,7 @@ export declare namespace DSChatTileT {
18
20
  ariaLabel: string;
19
21
  tooltipPlacement: TooltipPlacementT;
20
22
  disableTooltip: boolean;
23
+ applyAriaDisabled: boolean;
21
24
  }
22
25
  interface OptionalProps {
23
26
  onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;
@@ -25,9 +28,9 @@ export declare namespace DSChatTileT {
25
28
  onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
26
29
  innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
27
30
  }
28
- interface Props extends Partial<DefaultProps>, OptionalProps {
31
+ interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {
29
32
  }
30
- interface InternalProps extends DefaultProps, OptionalProps {
33
+ interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {
31
34
  }
32
35
  }
33
36
  export declare const defaultTileButton: DSChatTileT.DefaultProps;
@@ -51,4 +54,5 @@ export declare const propsTileButton: {
51
54
  tooltipPlacement: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
52
55
  disableTooltip: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
53
56
  innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
57
+ applyAriaDisabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
54
58
  };
package/dist/types/tests/DSChatTileButton.a11y.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat-tile",
3
- "version": "3.40.0-rc.0",
3
+ "version": "3.40.0-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat Tile",
6
6
  "files": [
@@ -48,16 +48,16 @@
48
48
  "typeSafety": true
49
49
  },
50
50
  "dependencies": {
51
- "@elliemae/ds-system": "3.40.0-rc.0",
52
- "@elliemae/ds-icons": "3.40.0-rc.0",
53
- "@elliemae/ds-props-helpers": "3.40.0-rc.0",
54
- "@elliemae/ds-grid": "3.40.0-rc.0",
55
- "@elliemae/ds-tooltip": "3.40.0-rc.0"
51
+ "@elliemae/ds-grid": "3.40.0-rc.2",
52
+ "@elliemae/ds-icons": "3.40.0-rc.2",
53
+ "@elliemae/ds-tooltip": "3.40.0-rc.2",
54
+ "@elliemae/ds-system": "3.40.0-rc.2",
55
+ "@elliemae/ds-props-helpers": "3.40.0-rc.2"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@elliemae/pui-cli": "9.0.0-next.50",
59
59
  "styled-components": "~5.3.9",
60
- "@elliemae/ds-monorepo-devops": "3.40.0-rc.0"
60
+ "@elliemae/ds-monorepo-devops": "3.40.0-rc.2"
61
61
  },
62
62
  "peerDependencies": {
63
63
  "lodash": "^4.17.21",