@elliemae/ds-chip 3.70.0-alpha.12 → 3.70.0-alpha.14

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 (14) hide show
  1. package/dist/cjs/DSChip.js +7 -13
  2. package/dist/cjs/DSChip.js.map +2 -2
  3. package/dist/cjs/config/useLabelExpansion.js +21 -38
  4. package/dist/cjs/config/useLabelExpansion.js.map +2 -2
  5. package/dist/cjs/styles.js +10 -0
  6. package/dist/cjs/styles.js.map +2 -2
  7. package/dist/esm/DSChip.js +7 -13
  8. package/dist/esm/DSChip.js.map +2 -2
  9. package/dist/esm/config/useLabelExpansion.js +21 -38
  10. package/dist/esm/config/useLabelExpansion.js.map +2 -2
  11. package/dist/esm/styles.js +10 -0
  12. package/dist/esm/styles.js.map +2 -2
  13. package/dist/types/config/useLabelExpansion.d.ts +6 -14
  14. package/package.json +7 -7
package/dist/cjs/DSChip.js CHANGED
@@ -61,20 +61,14 @@ const DSChip = (props) => {
61
61
  disabled,
62
62
  className,
63
63
  onClick,
64
- // Composed into the expansion handlers below. `onKeyDown` is not intercepted — Escape is handled
65
- // at the document level, so it passes through untouched.
66
- onMouseEnter: consumerMouseEnter,
67
- onMouseLeave: consumerMouseLeave,
68
- onFocus: consumerFocus,
69
- onBlur: consumerBlur,
64
+ // Consumer-supplied pointer/focus handlers stay in `restGlobals` so they remain on the button:
65
+ // their target contract is preserved (e.g. onBlur must bubble from the control for tooltips), and
66
+ // React's suppression of events on a natively disabled button applies to them, as before. Internal
67
+ // label expansion is driven separately from the non-disabled wrapper (see useLabelExpansion).
68
+ // `onKeyDown` is not intercepted — Escape is handled at the document level, so it passes untouched.
70
69
  ...restGlobals
71
70
  } = globalAttrs;
72
- const { expanded, labelRef, expansionHandlers } = (0, import_useLabelExpansion.useLabelExpansion)(wrapText, {
73
- onMouseEnter: consumerMouseEnter,
74
- onMouseLeave: consumerMouseLeave,
75
- onFocus: consumerFocus,
76
- onBlur: consumerBlur
77
- });
71
+ const { expanded, labelRef, expansionHandlers } = (0, import_useLabelExpansion.useLabelExpansion)(wrapText);
78
72
  const handleOnClick = (0, import_react.useCallback)(
79
73
  (e) => {
80
74
  if (applyAriaDisabled) return;
@@ -93,6 +87,7 @@ const DSChip = (props) => {
93
87
  className,
94
88
  ...xStyledAttrs,
95
89
  ...ownerPropsConfig,
90
+ ...expansionHandlers,
96
91
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
97
92
  import_styles.StyledChip,
98
93
  {
@@ -106,7 +101,6 @@ const DSChip = (props) => {
106
101
  buttonSize: size,
107
102
  expanded,
108
103
  "data-expanded": expanded || void 0,
109
- ...expansionHandlers,
110
104
  ...restGlobals,
111
105
  ...ownerPropsConfig,
112
106
  children: [
package/dist/cjs/DSChip.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSChip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { useConfig } from './config/useConfig.js';\nimport { useLabelExpansion } from './config/useLabelExpansion.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n wrapText,\n } = useConfig(props);\n\n const {\n disabled,\n className,\n onClick,\n // Composed into the expansion handlers below. `onKeyDown` is not intercepted \u2014 Escape is handled\n // at the document level, so it passes through untouched.\n onMouseEnter: consumerMouseEnter,\n onMouseLeave: consumerMouseLeave,\n onFocus: consumerFocus,\n onBlur: consumerBlur,\n ...restGlobals\n } = globalAttrs;\n\n const { expanded, labelRef, expansionHandlers } = useLabelExpansion(wrapText, {\n onMouseEnter: consumerMouseEnter,\n onMouseLeave: consumerMouseLeave,\n onFocus: consumerFocus,\n onBlur: consumerBlur,\n });\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper\n wrapText={wrapText}\n buttonShape={shape}\n buttonSize={size}\n className={className}\n {...xStyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled || applyAriaDisabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n onClick={handleOnClick}\n buttonSize={size}\n expanded={expanded}\n data-expanded={expanded || undefined}\n {...expansionHandlers}\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon size={DSIconSizes.M} />\n </StyledRoundShape>\n ) : (\n <Icon size={DSIconSizes.M} />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis\n component=\"span\"\n variant={TYPOGRAPHY_VARIANTS.B4}\n wrapText={wrapText}\n innerRef={labelRef}\n {...ownerPropsConfig}\n >\n {label}\n </StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypesSchema;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEjB;AAjEN,mBAAmC;AACnC,8BAAyB;AACzB,2BAAoC;AACpC,qBAA4B;AAC5B,uBAA0B;AAC1B,+BAAkC;AAClC,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAsC;AAEtC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4BAAU,KAAK;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,UAAU,UAAU,kBAAkB,QAAI,4CAAkB,UAAU;AAAA,IAC5E,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAuD;AACtD,UAAI,kBAAmB;AACvB,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,iBAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ;AAAA,UACA,iBAAe,YAAY;AAAA,UAC1B,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,sBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MAAa,GAAG,kBACpD,sDAAC,QAAK,MAAM,2BAAY,GAAG,GAC7B,IAEA,4CAAC,QAAK,MAAM,2BAAY,GAAG;AAAA,YAE7B,4CAAC,iCAAgB,MAAa,GAAG,kBAC/B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,yCAAoB;AAAA,gBAC7B;AAAA,gBACA,UAAU;AAAA,gBACT,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
4
+ "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { useConfig } from './config/useConfig.js';\nimport { useLabelExpansion } from './config/useLabelExpansion.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n wrapText,\n } = useConfig(props);\n\n const {\n disabled,\n className,\n onClick,\n // Consumer-supplied pointer/focus handlers stay in `restGlobals` so they remain on the button:\n // their target contract is preserved (e.g. onBlur must bubble from the control for tooltips), and\n // React's suppression of events on a natively disabled button applies to them, as before. Internal\n // label expansion is driven separately from the non-disabled wrapper (see useLabelExpansion).\n // `onKeyDown` is not intercepted \u2014 Escape is handled at the document level, so it passes untouched.\n ...restGlobals\n } = globalAttrs;\n\n const { expanded, labelRef, expansionHandlers } = useLabelExpansion(wrapText);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper\n wrapText={wrapText}\n buttonShape={shape}\n buttonSize={size}\n className={className}\n {...xStyledAttrs}\n {...ownerPropsConfig}\n {...expansionHandlers}\n >\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled || applyAriaDisabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n onClick={handleOnClick}\n buttonSize={size}\n expanded={expanded}\n data-expanded={expanded || undefined}\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon size={DSIconSizes.M} />\n </StyledRoundShape>\n ) : (\n <Icon size={DSIconSizes.M} />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis\n component=\"span\"\n variant={TYPOGRAPHY_VARIANTS.B4}\n wrapText={wrapText}\n innerRef={labelRef}\n {...ownerPropsConfig}\n >\n {label}\n </StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypesSchema;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DjB;AA5DN,mBAAmC;AACnC,8BAAyB;AACzB,2BAAoC;AACpC,qBAA4B;AAC5B,uBAA0B;AAC1B,+BAAkC;AAClC,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAsC;AAEtC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4BAAU,KAAK;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,UAAU,UAAU,kBAAkB,QAAI,4CAAkB,QAAQ;AAE5E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAuD;AACtD,UAAI,kBAAmB;AACvB,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,iBAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ;AAAA,UACA,iBAAe,YAAY;AAAA,UAC1B,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,sBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MAAa,GAAG,kBACpD,sDAAC,QAAK,MAAM,2BAAY,GAAG,GAC7B,IAEA,4CAAC,QAAK,MAAM,2BAAY,GAAG;AAAA,YAE7B,4CAAC,iCAAgB,MAAa,GAAG,kBAC/B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,yCAAoB;AAAA,gBAC7B;AAAA,gBACA,UAAU;AAAA,gBACT,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/config/useLabelExpansion.js CHANGED
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(useLabelExpansion_exports);
34
34
  var React = __toESM(require("react"));
35
35
  var import_react = require("react");
36
36
  var import_useEscapeDismiss = require("./useEscapeDismiss.js");
37
- const useLabelExpansion = (wrapText, consumer) => {
37
+ const useLabelExpansion = (wrapText) => {
38
38
  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
39
39
  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
40
40
  const [isDismissed, setIsDismissed] = (0, import_react.useState)(false);
@@ -55,43 +55,26 @@ const useLabelExpansion = (wrapText, consumer) => {
55
55
  setIsDismissed(false);
56
56
  }
57
57
  }, []);
58
- const { onMouseEnter, onMouseLeave, onFocus, onBlur } = consumer;
59
- const handleMouseEnter = (0, import_react.useCallback)(
60
- (e) => {
61
- measureOverflowOnEntry();
62
- hoveredRef.current = true;
63
- setIsHovered(true);
64
- onMouseEnter?.(e);
65
- },
66
- [onMouseEnter, measureOverflowOnEntry]
67
- );
68
- const handleMouseLeave = (0, import_react.useCallback)(
69
- (e) => {
70
- hoveredRef.current = false;
71
- setIsHovered(false);
72
- rearmIfLeft();
73
- onMouseLeave?.(e);
74
- },
75
- [onMouseLeave, rearmIfLeft]
76
- );
77
- const handleFocus = (0, import_react.useCallback)(
78
- (e) => {
79
- measureOverflowOnEntry();
80
- focusedRef.current = true;
81
- setIsFocused(true);
82
- onFocus?.(e);
83
- },
84
- [onFocus, measureOverflowOnEntry]
85
- );
86
- const handleBlur = (0, import_react.useCallback)(
87
- (e) => {
88
- focusedRef.current = false;
89
- setIsFocused(false);
90
- rearmIfLeft();
91
- onBlur?.(e);
92
- },
93
- [onBlur, rearmIfLeft]
94
- );
58
+ const handleMouseEnter = (0, import_react.useCallback)(() => {
59
+ measureOverflowOnEntry();
60
+ hoveredRef.current = true;
61
+ setIsHovered(true);
62
+ }, [measureOverflowOnEntry]);
63
+ const handleMouseLeave = (0, import_react.useCallback)(() => {
64
+ hoveredRef.current = false;
65
+ setIsHovered(false);
66
+ rearmIfLeft();
67
+ }, [rearmIfLeft]);
68
+ const handleFocus = (0, import_react.useCallback)(() => {
69
+ measureOverflowOnEntry();
70
+ focusedRef.current = true;
71
+ setIsFocused(true);
72
+ }, [measureOverflowOnEntry]);
73
+ const handleBlur = (0, import_react.useCallback)(() => {
74
+ focusedRef.current = false;
75
+ setIsFocused(false);
76
+ rearmIfLeft();
77
+ }, [rearmIfLeft]);
95
78
  const handleEscapeDismiss = (0, import_react.useCallback)(() => {
96
79
  dismissedRef.current = true;
97
80
  setIsDismissed(true);
package/dist/cjs/config/useLabelExpansion.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useLabelExpansion.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { useEscapeDismiss } from './useEscapeDismiss.js';\n\ninterface ConsumerHandlersT {\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n}\n\n// PUI-17950 \u2014 the expanded label overlays adjacent content, so WCAG 1.4.13 requires it be dismissible\n// without moving pointer or focus. That rules out CSS :hover/:focus, which a keypress cannot switch off.\n// `isOverflowing` matters beyond the visuals: without it a label that already fits would still claim an\n// expansion and swallow an Escape meant for an ancestor.\nexport const useLabelExpansion = (wrapText: boolean, consumer: ConsumerHandlersT) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isDismissed, setIsDismissed] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n // Mirrored so the leave handlers read both signals in the same tick, without a useEffect.\n const hoveredRef = useRef(false);\n const focusedRef = useRef(false);\n const dismissedRef = useRef(false);\n const labelRef = useRef<HTMLDivElement | null>(null);\n\n const expanded = !wrapText && isOverflowing && (isHovered || isFocused) && !isDismissed;\n\n // Only on a fresh entry: an already-expanded label is no longer clipped and would measure as fitting.\n const measureOverflowOnEntry = useCallback(() => {\n if (wrapText || hoveredRef.current || focusedRef.current) return;\n const node = labelRef.current;\n setIsOverflowing(!!node && node.scrollWidth > node.clientWidth);\n }, [wrapText]);\n\n const rearmIfLeft = useCallback(() => {\n if (!hoveredRef.current && !focusedRef.current && dismissedRef.current) {\n dismissedRef.current = false;\n setIsDismissed(false);\n }\n }, []);\n\n const { onMouseEnter, onMouseLeave, onFocus, onBlur } = consumer;\n\n const handleMouseEnter = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n measureOverflowOnEntry();\n hoveredRef.current = true;\n setIsHovered(true);\n onMouseEnter?.(e);\n },\n [onMouseEnter, measureOverflowOnEntry],\n );\n\n const handleMouseLeave = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n hoveredRef.current = false;\n setIsHovered(false);\n rearmIfLeft();\n onMouseLeave?.(e);\n },\n [onMouseLeave, rearmIfLeft],\n );\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLButtonElement>) => {\n measureOverflowOnEntry();\n focusedRef.current = true;\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus, measureOverflowOnEntry],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLButtonElement>) => {\n focusedRef.current = false;\n setIsFocused(false);\n rearmIfLeft();\n onBlur?.(e);\n },\n [onBlur, rearmIfLeft],\n );\n\n // Stable, or useEscapeDismiss resubscribes every render.\n const handleEscapeDismiss = useCallback(() => {\n dismissedRef.current = true;\n setIsDismissed(true);\n }, []);\n\n useEscapeDismiss(expanded, handleEscapeDismiss);\n\n return {\n expanded,\n labelRef,\n expansionHandlers: {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onFocus: handleFocus,\n onBlur: handleBlur,\n },\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,8BAAiC;AAa1B,MAAM,oBAAoB,CAAC,UAAmB,aAAgC;AACnF,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAGxD,QAAM,iBAAa,qBAAO,KAAK;AAC/B,QAAM,iBAAa,qBAAO,KAAK;AAC/B,QAAM,mBAAe,qBAAO,KAAK;AACjC,QAAM,eAAW,qBAA8B,IAAI;AAEnD,QAAM,WAAW,CAAC,YAAY,kBAAkB,aAAa,cAAc,CAAC;AAG5E,QAAM,6BAAyB,0BAAY,MAAM;AAC/C,QAAI,YAAY,WAAW,WAAW,WAAW,QAAS;AAC1D,UAAM,OAAO,SAAS;AACtB,qBAAiB,CAAC,CAAC,QAAQ,KAAK,cAAc,KAAK,WAAW;AAAA,EAChE,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC,WAAW,WAAW,CAAC,WAAW,WAAW,aAAa,SAAS;AACtE,mBAAa,UAAU;AACvB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,cAAc,cAAc,SAAS,OAAO,IAAI;AAExD,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAA2C;AAC1C,6BAAuB;AACvB,iBAAW,UAAU;AACrB,mBAAa,IAAI;AACjB,qBAAe,CAAC;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,sBAAsB;AAAA,EACvC;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAA2C;AAC1C,iBAAW,UAAU;AACrB,mBAAa,KAAK;AAClB,kBAAY;AACZ,qBAAe,CAAC;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAEA,QAAM,kBAAc;AAAA,IAClB,CAAC,MAA2C;AAC1C,6BAAuB;AACvB,iBAAW,UAAU;AACrB,mBAAa,IAAI;AACjB,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,SAAS,sBAAsB;AAAA,EAClC;AAEA,QAAM,iBAAa;AAAA,IACjB,CAAC,MAA2C;AAC1C,iBAAW,UAAU;AACrB,mBAAa,KAAK;AAClB,kBAAY;AACZ,eAAS,CAAC;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EACtB;AAGA,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,iBAAa,UAAU;AACvB,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,gDAAiB,UAAU,mBAAmB;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,MACjB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import { useCallback, useRef, useState } from 'react';\nimport { useEscapeDismiss } from './useEscapeDismiss.js';\n\n// PUI-17950 \u2014 the expanded label overlays adjacent content, so WCAG 1.4.13 requires it be dismissible\n// without moving pointer or focus. That rules out CSS :hover/:focus, which a keypress cannot switch off.\n// `isOverflowing` matters beyond the visuals: without it a label that already fits would still claim an\n// expansion and swallow an Escape meant for an ancestor.\n//\n// PUI-18894 \u2014 these handlers drive expansion internally and are attached to the chip's root wrapper (a\n// `<div>`), not the button. React does not dispatch synthetic mouse/focus events to a natively disabled\n// form control, so a disabled chip would never expand if they lived on the button; the non-disabled\n// wrapper still receives the (bubbling) native events. Consumer-supplied handlers are intentionally NOT\n// composed here \u2014 they stay on the button so their target contract (e.g. onBlur bubbling for tooltips)\n// is preserved.\nexport const useLabelExpansion = (wrapText: boolean) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isDismissed, setIsDismissed] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n // Mirrored so the leave handlers read both signals in the same tick, without a useEffect.\n const hoveredRef = useRef(false);\n const focusedRef = useRef(false);\n const dismissedRef = useRef(false);\n const labelRef = useRef<HTMLDivElement | null>(null);\n\n const expanded = !wrapText && isOverflowing && (isHovered || isFocused) && !isDismissed;\n\n // Only on a fresh entry: an already-expanded label is no longer clipped and would measure as fitting.\n const measureOverflowOnEntry = useCallback(() => {\n if (wrapText || hoveredRef.current || focusedRef.current) return;\n const node = labelRef.current;\n setIsOverflowing(!!node && node.scrollWidth > node.clientWidth);\n }, [wrapText]);\n\n const rearmIfLeft = useCallback(() => {\n if (!hoveredRef.current && !focusedRef.current && dismissedRef.current) {\n dismissedRef.current = false;\n setIsDismissed(false);\n }\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n measureOverflowOnEntry();\n hoveredRef.current = true;\n setIsHovered(true);\n }, [measureOverflowOnEntry]);\n\n const handleMouseLeave = useCallback(() => {\n hoveredRef.current = false;\n setIsHovered(false);\n rearmIfLeft();\n }, [rearmIfLeft]);\n\n // Focus/blur bubble from the button up to the wrapper (focusin/focusout), so keyboard-focus\n // expansion keeps working even though the handlers no longer sit on the control itself.\n const handleFocus = useCallback(() => {\n measureOverflowOnEntry();\n focusedRef.current = true;\n setIsFocused(true);\n }, [measureOverflowOnEntry]);\n\n const handleBlur = useCallback(() => {\n focusedRef.current = false;\n setIsFocused(false);\n rearmIfLeft();\n }, [rearmIfLeft]);\n\n // Stable, or useEscapeDismiss resubscribes every render.\n const handleEscapeDismiss = useCallback(() => {\n dismissedRef.current = true;\n setIsDismissed(true);\n }, []);\n\n useEscapeDismiss(expanded, handleEscapeDismiss);\n\n return {\n expanded,\n labelRef,\n expansionHandlers: {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onFocus: handleFocus,\n onBlur: handleBlur,\n },\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8C;AAC9C,8BAAiC;AAa1B,MAAM,oBAAoB,CAAC,aAAsB;AACtD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAGxD,QAAM,iBAAa,qBAAO,KAAK;AAC/B,QAAM,iBAAa,qBAAO,KAAK;AAC/B,QAAM,mBAAe,qBAAO,KAAK;AACjC,QAAM,eAAW,qBAA8B,IAAI;AAEnD,QAAM,WAAW,CAAC,YAAY,kBAAkB,aAAa,cAAc,CAAC;AAG5E,QAAM,6BAAyB,0BAAY,MAAM;AAC/C,QAAI,YAAY,WAAW,WAAW,WAAW,QAAS;AAC1D,UAAM,OAAO,SAAS;AACtB,qBAAiB,CAAC,CAAC,QAAQ,KAAK,cAAc,KAAK,WAAW;AAAA,EAChE,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC,WAAW,WAAW,CAAC,WAAW,WAAW,aAAa,SAAS;AACtE,mBAAa,UAAU;AACvB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,2BAAuB;AACvB,eAAW,UAAU;AACrB,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,sBAAsB,CAAC;AAE3B,QAAM,uBAAmB,0BAAY,MAAM;AACzC,eAAW,UAAU;AACrB,iBAAa,KAAK;AAClB,gBAAY;AAAA,EACd,GAAG,CAAC,WAAW,CAAC;AAIhB,QAAM,kBAAc,0BAAY,MAAM;AACpC,2BAAuB;AACvB,eAAW,UAAU;AACrB,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,sBAAsB,CAAC;AAE3B,QAAM,iBAAa,0BAAY,MAAM;AACnC,eAAW,UAAU;AACrB,iBAAa,KAAK;AAClB,gBAAY;AAAA,EACd,GAAG,CAAC,WAAW,CAAC;AAGhB,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,iBAAa,UAAU;AACvB,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,gDAAiB,UAAU,mBAAmB;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,MACjB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styles.js CHANGED
@@ -154,6 +154,16 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_constan
154
154
  min-height: 100%;
155
155
  height: fit-content;
156
156
  width: 100%;
157
+
158
+ /*
159
+ * PUI-19172 — icons are sized in rem (1.846rem on a 13px root = 23.984px, not 24) while the
160
+ * drawing fills its "0 0 24 24" viewBox, so the UA's default overflow:hidden on <svg> shaves the
161
+ * edge stroke at unfavourable sub-pixel offsets. On the root, not StyledRoundShape, because a
162
+ * non-round chip renders its icon as a direct child here.
163
+ */
164
+ svg {
165
+ overflow: visible;
166
+ }
157
167
  background-color: ${({ theme }) => theme.colors.neutral["000"]};
158
168
  color: ${({ theme }) => theme.colors.brand[600]};
159
169
  border-radius: 4px;
package/dist/cjs/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n expanded?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[400]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'expanded'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n z-index: ${({ expanded }) => (expanded ? 10 : 'auto')};\n /* Keep this interpolation always present \u2014 making it conditional changes the styled wrapper's hook\n count between renders. */\n ${StyledSpanWithEllipsis} {\n ${({ expanded }) =>\n expanded &&\n css`\n ${wrapTextStyles}\n `}\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `\n }\n }\n }\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n expanded?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[400]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'expanded'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n\n /*\n * PUI-19172 \u2014 icons are sized in rem (1.846rem on a 13px root = 23.984px, not 24) while the\n * drawing fills its \"0 0 24 24\" viewBox, so the UA's default overflow:hidden on <svg> shaves the\n * edge stroke at unfavourable sub-pixel offsets. On the root, not StyledRoundShape, because a\n * non-round chip renders its icon as a direct child here.\n */\n svg {\n overflow: visible;\n }\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n z-index: ${({ expanded }) => (expanded ? 10 : 'auto')};\n /* Keep this interpolation always present \u2014 making it conditional changes the styled wrapper's hook\n count between renders. */\n ${StyledSpanWithEllipsis} {\n ${({ expanded }) =>\n expanded &&\n css`\n ${wrapTextStyles}\n `}\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `\n }\n }\n }\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/DSChip.js CHANGED
@@ -27,20 +27,14 @@ const DSChip = (props) => {
27
27
  disabled,
28
28
  className,
29
29
  onClick,
30
- // Composed into the expansion handlers below. `onKeyDown` is not intercepted — Escape is handled
31
- // at the document level, so it passes through untouched.
32
- onMouseEnter: consumerMouseEnter,
33
- onMouseLeave: consumerMouseLeave,
34
- onFocus: consumerFocus,
35
- onBlur: consumerBlur,
30
+ // Consumer-supplied pointer/focus handlers stay in `restGlobals` so they remain on the button:
31
+ // their target contract is preserved (e.g. onBlur must bubble from the control for tooltips), and
32
+ // React's suppression of events on a natively disabled button applies to them, as before. Internal
33
+ // label expansion is driven separately from the non-disabled wrapper (see useLabelExpansion).
34
+ // `onKeyDown` is not intercepted — Escape is handled at the document level, so it passes untouched.
36
35
  ...restGlobals
37
36
  } = globalAttrs;
38
- const { expanded, labelRef, expansionHandlers } = useLabelExpansion(wrapText, {
39
- onMouseEnter: consumerMouseEnter,
40
- onMouseLeave: consumerMouseLeave,
41
- onFocus: consumerFocus,
42
- onBlur: consumerBlur
43
- });
37
+ const { expanded, labelRef, expansionHandlers } = useLabelExpansion(wrapText);
44
38
  const handleOnClick = useCallback(
45
39
  (e) => {
46
40
  if (applyAriaDisabled) return;
@@ -59,6 +53,7 @@ const DSChip = (props) => {
59
53
  className,
60
54
  ...xStyledAttrs,
61
55
  ...ownerPropsConfig,
56
+ ...expansionHandlers,
62
57
  children: /* @__PURE__ */ jsxs(
63
58
  StyledChip,
64
59
  {
@@ -72,7 +67,6 @@ const DSChip = (props) => {
72
67
  buttonSize: size,
73
68
  expanded,
74
69
  "data-expanded": expanded || void 0,
75
- ...expansionHandlers,
76
70
  ...restGlobals,
77
71
  ...ownerPropsConfig,
78
72
  children: [
package/dist/esm/DSChip.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSChip.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { useConfig } from './config/useConfig.js';\nimport { useLabelExpansion } from './config/useLabelExpansion.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n wrapText,\n } = useConfig(props);\n\n const {\n disabled,\n className,\n onClick,\n // Composed into the expansion handlers below. `onKeyDown` is not intercepted \u2014 Escape is handled\n // at the document level, so it passes through untouched.\n onMouseEnter: consumerMouseEnter,\n onMouseLeave: consumerMouseLeave,\n onFocus: consumerFocus,\n onBlur: consumerBlur,\n ...restGlobals\n } = globalAttrs;\n\n const { expanded, labelRef, expansionHandlers } = useLabelExpansion(wrapText, {\n onMouseEnter: consumerMouseEnter,\n onMouseLeave: consumerMouseLeave,\n onFocus: consumerFocus,\n onBlur: consumerBlur,\n });\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper\n wrapText={wrapText}\n buttonShape={shape}\n buttonSize={size}\n className={className}\n {...xStyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled || applyAriaDisabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n onClick={handleOnClick}\n buttonSize={size}\n expanded={expanded}\n data-expanded={expanded || undefined}\n {...expansionHandlers}\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon size={DSIconSizes.M} />\n </StyledRoundShape>\n ) : (\n <Icon size={DSIconSizes.M} />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis\n component=\"span\"\n variant={TYPOGRAPHY_VARIANTS.B4}\n wrapText={wrapText}\n innerRef={labelRef}\n {...ownerPropsConfig}\n >\n {label}\n </StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypesSchema;\n\nexport { DSChip, DSChipWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACiEjB,SAiBM,KAjBN;AAjEN,SAAgB,mBAAmB;AACnC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AAEtC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,UAAU,UAAU,kBAAkB,IAAI,kBAAkB,UAAU;AAAA,IAC5E,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAuD;AACtD,UAAI,kBAAmB;AACvB,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,iBAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ;AAAA,UACA,iBAAe,YAAY;AAAA,UAC1B,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,sBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MAAa,GAAG,kBACpD,8BAAC,QAAK,MAAM,YAAY,GAAG,GAC7B,IAEA,oBAAC,QAAK,MAAM,YAAY,GAAG;AAAA,YAE7B,oBAAC,mBAAgB,MAAa,GAAG,kBAC/B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,oBAAoB;AAAA,gBAC7B;AAAA,gBACA,UAAU;AAAA,gBACT,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { useConfig } from './config/useConfig.js';\nimport { useLabelExpansion } from './config/useLabelExpansion.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n wrapText,\n } = useConfig(props);\n\n const {\n disabled,\n className,\n onClick,\n // Consumer-supplied pointer/focus handlers stay in `restGlobals` so they remain on the button:\n // their target contract is preserved (e.g. onBlur must bubble from the control for tooltips), and\n // React's suppression of events on a natively disabled button applies to them, as before. Internal\n // label expansion is driven separately from the non-disabled wrapper (see useLabelExpansion).\n // `onKeyDown` is not intercepted \u2014 Escape is handled at the document level, so it passes untouched.\n ...restGlobals\n } = globalAttrs;\n\n const { expanded, labelRef, expansionHandlers } = useLabelExpansion(wrapText);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper\n wrapText={wrapText}\n buttonShape={shape}\n buttonSize={size}\n className={className}\n {...xStyledAttrs}\n {...ownerPropsConfig}\n {...expansionHandlers}\n >\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled || applyAriaDisabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n onClick={handleOnClick}\n buttonSize={size}\n expanded={expanded}\n data-expanded={expanded || undefined}\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon size={DSIconSizes.M} />\n </StyledRoundShape>\n ) : (\n <Icon size={DSIconSizes.M} />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis\n component=\"span\"\n variant={TYPOGRAPHY_VARIANTS.B4}\n wrapText={wrapText}\n innerRef={labelRef}\n {...ownerPropsConfig}\n >\n {label}\n </StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypesSchema;\n\nexport { DSChip, DSChipWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC4DjB,SAgBM,KAhBN;AA5DN,SAAgB,mBAAmB;AACnC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AAEtC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,UAAU,UAAU,kBAAkB,IAAI,kBAAkB,QAAQ;AAE5E,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAuD;AACtD,UAAI,kBAAmB;AACvB,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,iBAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ;AAAA,UACA,iBAAe,YAAY;AAAA,UAC1B,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,sBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MAAa,GAAG,kBACpD,8BAAC,QAAK,MAAM,YAAY,GAAG,GAC7B,IAEA,oBAAC,QAAK,MAAM,YAAY,GAAG;AAAA,YAE7B,oBAAC,mBAAgB,MAAa,GAAG,kBAC/B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,oBAAoB;AAAA,gBAC7B;AAAA,gBACA,UAAU;AAAA,gBACT,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/config/useLabelExpansion.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { useCallback, useRef, useState } from "react";
3
3
  import { useEscapeDismiss } from "./useEscapeDismiss.js";
4
- const useLabelExpansion = (wrapText, consumer) => {
4
+ const useLabelExpansion = (wrapText) => {
5
5
  const [isHovered, setIsHovered] = useState(false);
6
6
  const [isFocused, setIsFocused] = useState(false);
7
7
  const [isDismissed, setIsDismissed] = useState(false);
@@ -22,43 +22,26 @@ const useLabelExpansion = (wrapText, consumer) => {
22
22
  setIsDismissed(false);
23
23
  }
24
24
  }, []);
25
- const { onMouseEnter, onMouseLeave, onFocus, onBlur } = consumer;
26
- const handleMouseEnter = useCallback(
27
- (e) => {
28
- measureOverflowOnEntry();
29
- hoveredRef.current = true;
30
- setIsHovered(true);
31
- onMouseEnter?.(e);
32
- },
33
- [onMouseEnter, measureOverflowOnEntry]
34
- );
35
- const handleMouseLeave = useCallback(
36
- (e) => {
37
- hoveredRef.current = false;
38
- setIsHovered(false);
39
- rearmIfLeft();
40
- onMouseLeave?.(e);
41
- },
42
- [onMouseLeave, rearmIfLeft]
43
- );
44
- const handleFocus = useCallback(
45
- (e) => {
46
- measureOverflowOnEntry();
47
- focusedRef.current = true;
48
- setIsFocused(true);
49
- onFocus?.(e);
50
- },
51
- [onFocus, measureOverflowOnEntry]
52
- );
53
- const handleBlur = useCallback(
54
- (e) => {
55
- focusedRef.current = false;
56
- setIsFocused(false);
57
- rearmIfLeft();
58
- onBlur?.(e);
59
- },
60
- [onBlur, rearmIfLeft]
61
- );
25
+ const handleMouseEnter = useCallback(() => {
26
+ measureOverflowOnEntry();
27
+ hoveredRef.current = true;
28
+ setIsHovered(true);
29
+ }, [measureOverflowOnEntry]);
30
+ const handleMouseLeave = useCallback(() => {
31
+ hoveredRef.current = false;
32
+ setIsHovered(false);
33
+ rearmIfLeft();
34
+ }, [rearmIfLeft]);
35
+ const handleFocus = useCallback(() => {
36
+ measureOverflowOnEntry();
37
+ focusedRef.current = true;
38
+ setIsFocused(true);
39
+ }, [measureOverflowOnEntry]);
40
+ const handleBlur = useCallback(() => {
41
+ focusedRef.current = false;
42
+ setIsFocused(false);
43
+ rearmIfLeft();
44
+ }, [rearmIfLeft]);
62
45
  const handleEscapeDismiss = useCallback(() => {
63
46
  dismissedRef.current = true;
64
47
  setIsDismissed(true);
package/dist/esm/config/useLabelExpansion.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useLabelExpansion.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { useEscapeDismiss } from './useEscapeDismiss.js';\n\ninterface ConsumerHandlersT {\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n}\n\n// PUI-17950 \u2014 the expanded label overlays adjacent content, so WCAG 1.4.13 requires it be dismissible\n// without moving pointer or focus. That rules out CSS :hover/:focus, which a keypress cannot switch off.\n// `isOverflowing` matters beyond the visuals: without it a label that already fits would still claim an\n// expansion and swallow an Escape meant for an ancestor.\nexport const useLabelExpansion = (wrapText: boolean, consumer: ConsumerHandlersT) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isDismissed, setIsDismissed] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n // Mirrored so the leave handlers read both signals in the same tick, without a useEffect.\n const hoveredRef = useRef(false);\n const focusedRef = useRef(false);\n const dismissedRef = useRef(false);\n const labelRef = useRef<HTMLDivElement | null>(null);\n\n const expanded = !wrapText && isOverflowing && (isHovered || isFocused) && !isDismissed;\n\n // Only on a fresh entry: an already-expanded label is no longer clipped and would measure as fitting.\n const measureOverflowOnEntry = useCallback(() => {\n if (wrapText || hoveredRef.current || focusedRef.current) return;\n const node = labelRef.current;\n setIsOverflowing(!!node && node.scrollWidth > node.clientWidth);\n }, [wrapText]);\n\n const rearmIfLeft = useCallback(() => {\n if (!hoveredRef.current && !focusedRef.current && dismissedRef.current) {\n dismissedRef.current = false;\n setIsDismissed(false);\n }\n }, []);\n\n const { onMouseEnter, onMouseLeave, onFocus, onBlur } = consumer;\n\n const handleMouseEnter = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n measureOverflowOnEntry();\n hoveredRef.current = true;\n setIsHovered(true);\n onMouseEnter?.(e);\n },\n [onMouseEnter, measureOverflowOnEntry],\n );\n\n const handleMouseLeave = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n hoveredRef.current = false;\n setIsHovered(false);\n rearmIfLeft();\n onMouseLeave?.(e);\n },\n [onMouseLeave, rearmIfLeft],\n );\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLButtonElement>) => {\n measureOverflowOnEntry();\n focusedRef.current = true;\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus, measureOverflowOnEntry],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLButtonElement>) => {\n focusedRef.current = false;\n setIsFocused(false);\n rearmIfLeft();\n onBlur?.(e);\n },\n [onBlur, rearmIfLeft],\n );\n\n // Stable, or useEscapeDismiss resubscribes every render.\n const handleEscapeDismiss = useCallback(() => {\n dismissedRef.current = true;\n setIsDismissed(true);\n }, []);\n\n useEscapeDismiss(expanded, handleEscapeDismiss);\n\n return {\n expanded,\n labelRef,\n expansionHandlers: {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onFocus: handleFocus,\n onBlur: handleBlur,\n },\n };\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,wBAAwB;AAa1B,MAAM,oBAAoB,CAAC,UAAmB,aAAgC;AACnF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAGxD,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,OAA8B,IAAI;AAEnD,QAAM,WAAW,CAAC,YAAY,kBAAkB,aAAa,cAAc,CAAC;AAG5E,QAAM,yBAAyB,YAAY,MAAM;AAC/C,QAAI,YAAY,WAAW,WAAW,WAAW,QAAS;AAC1D,UAAM,OAAO,SAAS;AACtB,qBAAiB,CAAC,CAAC,QAAQ,KAAK,cAAc,KAAK,WAAW;AAAA,EAChE,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,WAAW,WAAW,CAAC,WAAW,WAAW,aAAa,SAAS;AACtE,mBAAa,UAAU;AACvB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,cAAc,cAAc,SAAS,OAAO,IAAI;AAExD,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA2C;AAC1C,6BAAuB;AACvB,iBAAW,UAAU;AACrB,mBAAa,IAAI;AACjB,qBAAe,CAAC;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,sBAAsB;AAAA,EACvC;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA2C;AAC1C,iBAAW,UAAU;AACrB,mBAAa,KAAK;AAClB,kBAAY;AACZ,qBAAe,CAAC;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,MAA2C;AAC1C,6BAAuB;AACvB,iBAAW,UAAU;AACrB,mBAAa,IAAI;AACjB,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,SAAS,sBAAsB;AAAA,EAClC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAA2C;AAC1C,iBAAW,UAAU;AACrB,mBAAa,KAAK;AAClB,kBAAY;AACZ,eAAS,CAAC;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EACtB;AAGA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,iBAAa,UAAU;AACvB,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,mBAAiB,UAAU,mBAAmB;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,MACjB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useRef, useState } from 'react';\nimport { useEscapeDismiss } from './useEscapeDismiss.js';\n\n// PUI-17950 \u2014 the expanded label overlays adjacent content, so WCAG 1.4.13 requires it be dismissible\n// without moving pointer or focus. That rules out CSS :hover/:focus, which a keypress cannot switch off.\n// `isOverflowing` matters beyond the visuals: without it a label that already fits would still claim an\n// expansion and swallow an Escape meant for an ancestor.\n//\n// PUI-18894 \u2014 these handlers drive expansion internally and are attached to the chip's root wrapper (a\n// `<div>`), not the button. React does not dispatch synthetic mouse/focus events to a natively disabled\n// form control, so a disabled chip would never expand if they lived on the button; the non-disabled\n// wrapper still receives the (bubbling) native events. Consumer-supplied handlers are intentionally NOT\n// composed here \u2014 they stay on the button so their target contract (e.g. onBlur bubbling for tooltips)\n// is preserved.\nexport const useLabelExpansion = (wrapText: boolean) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isDismissed, setIsDismissed] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n // Mirrored so the leave handlers read both signals in the same tick, without a useEffect.\n const hoveredRef = useRef(false);\n const focusedRef = useRef(false);\n const dismissedRef = useRef(false);\n const labelRef = useRef<HTMLDivElement | null>(null);\n\n const expanded = !wrapText && isOverflowing && (isHovered || isFocused) && !isDismissed;\n\n // Only on a fresh entry: an already-expanded label is no longer clipped and would measure as fitting.\n const measureOverflowOnEntry = useCallback(() => {\n if (wrapText || hoveredRef.current || focusedRef.current) return;\n const node = labelRef.current;\n setIsOverflowing(!!node && node.scrollWidth > node.clientWidth);\n }, [wrapText]);\n\n const rearmIfLeft = useCallback(() => {\n if (!hoveredRef.current && !focusedRef.current && dismissedRef.current) {\n dismissedRef.current = false;\n setIsDismissed(false);\n }\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n measureOverflowOnEntry();\n hoveredRef.current = true;\n setIsHovered(true);\n }, [measureOverflowOnEntry]);\n\n const handleMouseLeave = useCallback(() => {\n hoveredRef.current = false;\n setIsHovered(false);\n rearmIfLeft();\n }, [rearmIfLeft]);\n\n // Focus/blur bubble from the button up to the wrapper (focusin/focusout), so keyboard-focus\n // expansion keeps working even though the handlers no longer sit on the control itself.\n const handleFocus = useCallback(() => {\n measureOverflowOnEntry();\n focusedRef.current = true;\n setIsFocused(true);\n }, [measureOverflowOnEntry]);\n\n const handleBlur = useCallback(() => {\n focusedRef.current = false;\n setIsFocused(false);\n rearmIfLeft();\n }, [rearmIfLeft]);\n\n // Stable, or useEscapeDismiss resubscribes every render.\n const handleEscapeDismiss = useCallback(() => {\n dismissedRef.current = true;\n setIsDismissed(true);\n }, []);\n\n useEscapeDismiss(expanded, handleEscapeDismiss);\n\n return {\n expanded,\n labelRef,\n expansionHandlers: {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onFocus: handleFocus,\n onBlur: handleBlur,\n },\n };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,wBAAwB;AAa1B,MAAM,oBAAoB,CAAC,aAAsB;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAGxD,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,OAA8B,IAAI;AAEnD,QAAM,WAAW,CAAC,YAAY,kBAAkB,aAAa,cAAc,CAAC;AAG5E,QAAM,yBAAyB,YAAY,MAAM;AAC/C,QAAI,YAAY,WAAW,WAAW,WAAW,QAAS;AAC1D,UAAM,OAAO,SAAS;AACtB,qBAAiB,CAAC,CAAC,QAAQ,KAAK,cAAc,KAAK,WAAW;AAAA,EAChE,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,WAAW,WAAW,CAAC,WAAW,WAAW,aAAa,SAAS;AACtE,mBAAa,UAAU;AACvB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,2BAAuB;AACvB,eAAW,UAAU;AACrB,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,sBAAsB,CAAC;AAE3B,QAAM,mBAAmB,YAAY,MAAM;AACzC,eAAW,UAAU;AACrB,iBAAa,KAAK;AAClB,gBAAY;AAAA,EACd,GAAG,CAAC,WAAW,CAAC;AAIhB,QAAM,cAAc,YAAY,MAAM;AACpC,2BAAuB;AACvB,eAAW,UAAU;AACrB,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,sBAAsB,CAAC;AAE3B,QAAM,aAAa,YAAY,MAAM;AACnC,eAAW,UAAU;AACrB,iBAAa,KAAK;AAClB,gBAAY;AAAA,EACd,GAAG,CAAC,WAAW,CAAC;AAGhB,QAAM,sBAAsB,YAAY,MAAM;AAC5C,iBAAa,UAAU;AACvB,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,mBAAiB,UAAU,mBAAmB;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,MACjB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/styles.js CHANGED
@@ -128,6 +128,16 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
128
128
  min-height: 100%;
129
129
  height: fit-content;
130
130
  width: 100%;
131
+
132
+ /*
133
+ * PUI-19172 — icons are sized in rem (1.846rem on a 13px root = 23.984px, not 24) while the
134
+ * drawing fills its "0 0 24 24" viewBox, so the UA's default overflow:hidden on <svg> shaves the
135
+ * edge stroke at unfavourable sub-pixel offsets. On the root, not StyledRoundShape, because a
136
+ * non-round chip renders its icon as a direct child here.
137
+ */
138
+ svg {
139
+ overflow: visible;
140
+ }
131
141
  background-color: ${({ theme }) => theme.colors.neutral["000"]};
132
142
  color: ${({ theme }) => theme.colors.brand[600]};
133
143
  border-radius: 4px;
package/dist/esm/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n expanded?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[400]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'expanded'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n z-index: ${({ expanded }) => (expanded ? 10 : 'auto')};\n /* Keep this interpolation always present \u2014 making it conditional changes the styled wrapper's hook\n count between renders. */\n ${StyledSpanWithEllipsis} {\n ${({ expanded }) =>\n expanded &&\n css`\n ${wrapTextStyles}\n `}\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `\n }\n }\n }\n `}\n`;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n expanded?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[400]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'expanded'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n\n /*\n * PUI-19172 \u2014 icons are sized in rem (1.846rem on a 13px root = 23.984px, not 24) while the\n * drawing fills its \"0 0 24 24\" viewBox, so the UA's default overflow:hidden on <svg> shaves the\n * edge stroke at unfavourable sub-pixel offsets. On the root, not StyledRoundShape, because a\n * non-round chip renders its icon as a direct child here.\n */\n svg {\n overflow: visible;\n }\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n z-index: ${({ expanded }) => (expanded ? 10 : 'auto')};\n /* Keep this interpolation always present \u2014 making it conditional changes the styled wrapper's hook\n count between renders. */\n ${StyledSpanWithEllipsis} {\n ${({ expanded }) =>\n expanded &&\n css`\n ${wrapTextStyles}\n `}\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `\n }\n }\n }\n `}\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/types/config/useLabelExpansion.d.ts CHANGED
@@ -1,18 +1,10 @@
1
- import type React from 'react';
2
- interface ConsumerHandlersT {
3
- onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
4
- onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
5
- onFocus?: React.FocusEventHandler<HTMLButtonElement>;
6
- onBlur?: React.FocusEventHandler<HTMLButtonElement>;
7
- }
8
- export declare const useLabelExpansion: (wrapText: boolean, consumer: ConsumerHandlersT) => {
1
+ export declare const useLabelExpansion: (wrapText: boolean) => {
9
2
  expanded: boolean;
10
- labelRef: React.MutableRefObject<HTMLDivElement | null>;
3
+ labelRef: import("react").MutableRefObject<HTMLDivElement | null>;
11
4
  expansionHandlers: {
12
- onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => void;
13
- onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => void;
14
- onFocus: (e: React.FocusEvent<HTMLButtonElement>) => void;
15
- onBlur: (e: React.FocusEvent<HTMLButtonElement>) => void;
5
+ onMouseEnter: () => void;
6
+ onMouseLeave: () => void;
7
+ onFocus: () => void;
8
+ onBlur: () => void;
16
9
  };
17
10
  };
18
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chip",
3
- "version": "3.70.0-alpha.12",
3
+ "version": "3.70.0-alpha.14",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chip",
6
6
  "files": [
@@ -36,16 +36,16 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-props-helpers": "3.70.0-alpha.12",
40
- "@elliemae/ds-system": "3.70.0-alpha.12",
41
- "@elliemae/ds-typescript-helpers": "3.70.0-alpha.12"
39
+ "@elliemae/ds-props-helpers": "3.70.0-alpha.14",
40
+ "@elliemae/ds-system": "3.70.0-alpha.14",
41
+ "@elliemae/ds-typescript-helpers": "3.70.0-alpha.14"
42
42
  },
43
43
  "devDependencies": {
44
44
  "jest": "^30.0.0",
45
45
  "styled-components": "~5.3.11",
46
- "@elliemae/ds-icons": "3.70.0-alpha.12",
47
- "@elliemae/ds-monorepo-devops": "3.70.0-alpha.12",
48
- "@elliemae/ds-test-utils": "3.70.0-alpha.12"
46
+ "@elliemae/ds-icons": "3.70.0-alpha.14",
47
+ "@elliemae/ds-monorepo-devops": "3.70.0-alpha.14",
48
+ "@elliemae/ds-test-utils": "3.70.0-alpha.14"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "lodash-es": "^4.18.1",