@elliemae/ds-chip 3.70.0-next.7 → 3.70.0-next.71

package/dist/esm/config/useLabelExpansion.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { useCallback, useRef, useState } from "react";
+import { useEscapeDismiss } from "./useEscapeDismiss.js";
+const useLabelExpansion = (wrapText, consumer) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const hoveredRef = useRef(false);
+  const focusedRef = useRef(false);
+  const dismissedRef = useRef(false);
+  const labelRef = useRef(null);
+  const expanded = !wrapText && isOverflowing && (isHovered || isFocused) && !isDismissed;
+  const measureOverflowOnEntry = useCallback(() => {
+    if (wrapText || hoveredRef.current || focusedRef.current) return;
+    const node = labelRef.current;
+    setIsOverflowing(!!node && node.scrollWidth > node.clientWidth);
+  }, [wrapText]);
+  const rearmIfLeft = useCallback(() => {
+    if (!hoveredRef.current && !focusedRef.current && dismissedRef.current) {
+      dismissedRef.current = false;
+      setIsDismissed(false);
+    }
+  }, []);
+  const { onMouseEnter, onMouseLeave, onFocus, onBlur } = consumer;
+  const handleMouseEnter = useCallback(
+    (e) => {
+      measureOverflowOnEntry();
+      hoveredRef.current = true;
+      setIsHovered(true);
+      onMouseEnter?.(e);
+    },
+    [onMouseEnter, measureOverflowOnEntry]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      hoveredRef.current = false;
+      setIsHovered(false);
+      rearmIfLeft();
+      onMouseLeave?.(e);
+    },
+    [onMouseLeave, rearmIfLeft]
+  );
+  const handleFocus = useCallback(
+    (e) => {
+      measureOverflowOnEntry();
+      focusedRef.current = true;
+      setIsFocused(true);
+      onFocus?.(e);
+    },
+    [onFocus, measureOverflowOnEntry]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      focusedRef.current = false;
+      setIsFocused(false);
+      rearmIfLeft();
+      onBlur?.(e);
+    },
+    [onBlur, rearmIfLeft]
+  );
+  const handleEscapeDismiss = useCallback(() => {
+    dismissedRef.current = true;
+    setIsDismissed(true);
+  }, []);
+  useEscapeDismiss(expanded, handleEscapeDismiss);
+  return {
+    expanded,
+    labelRef,
+    expansionHandlers: {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  };
+};
+export {
+  useLabelExpansion
+};
+//# sourceMappingURL=useLabelExpansion.js.map

package/dist/esm/config/useLabelExpansion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useLabelExpansion.ts"],
+  "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"],
+  "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;",
+  "names": []
+}

package/dist/esm/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n  DSChipName,\n  CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n  applyAriaDisabled: false,\n  wrapText: false,\n};\n\nexport declare namespace DSChipT {\n  export interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n    applyAriaDisabled: boolean;\n    wrapText: boolean;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof CHIP_SLOTS> {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  export interface RequiredProps {\n    label: string;\n    icon: React.ComponentType<{\n      size?: string;\n    }>;\n  }\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSChipPropTypes: DSPropTypesSchema<DSChipT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n  label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n  selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\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  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  wrapText: PropTypes.bool.description('wrap text in the label of the chip').defaultValue(false),\n};\n\nexport const DSChipPropTypesSchema = DSChipPropTypes as unknown as ValidationMap<DSChipT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AA0CO,MAAM,kBAAoD;AAAA,EAC/D,GAAG,yBAAyB,YAAY,UAAU;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,UAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,UAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,UAAU,MAAM,qBAAqB,EAAE,YAAY,sBAAsB,EAAE,aAAa,YAAY,OAAO;AAAA,EAClH,MAAM,UAAU,MAAM,oBAAoB,EAAE,YAAY,qBAAqB,EAAE,aAAa,WAAW,CAAC;AAAA,EACxG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,wBAAwB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n  DSChipName,\n  CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n  applyAriaDisabled: false,\n  wrapText: false,\n};\n\nexport declare namespace DSChipT {\n  export interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n    applyAriaDisabled: boolean;\n    wrapText: boolean;\n  }\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSChipName,\n    typeof CHIP_SLOTS\n  > {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  export interface RequiredProps {\n    label: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n  }\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSChipPropTypes: DSPropTypesSchema<DSChipT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n  label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n  selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\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  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  wrapText: PropTypes.bool.description('wrap text in the label of the chip').defaultValue(false),\n};\n\nexport const DSChipPropTypesSchema = DSChipPropTypes as unknown as ValidationMap<DSChipT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AA4CO,MAAM,kBAAoD;AAAA,EAC/D,GAAG,yBAAyB,YAAY,UAAU;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,UAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,UAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,UAAU,MAAM,qBAAqB,EAAE,YAAY,sBAAsB,EAAE,aAAa,YAAY,OAAO;AAAA,EAClH,MAAM,UAAU,MAAM,oBAAoB,EAAE,YAAY,qBAAqB,EAAE,aAAa,WAAW,CAAC;AAAA,EACxG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,wBAAwB;",
   "names": []
 }

package/dist/esm/styles.js

@@ -56,10 +56,10 @@ const StyledWrapper = styled("div", {
   ${({ wrapText, buttonSize, buttonShape }) => wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}
 `;
 const disabledRoundShape = css`
-  background-color: ${({ theme }) => theme.colors.neutral[200]};
+  background-color: ${({ theme }) => theme.colors.neutral[400]};
 
   & .DSIcon-root .DSIcon-svg {
-    fill: ${({ theme }) => theme.colors.neutral[500]};
+    fill: ${({ theme }) => theme.colors.neutral["000"]};
   }
 `;
 const StyledRoundShape = styled("div", {
@@ -123,7 +123,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   border: none;
   min-height: 100%;
   height: fit-content;
@@ -166,14 +166,13 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
     color: ${({ theme }) => theme.colors.neutral[600]};
   }
 
-  &:hover,
-  &:focus {
-    z-index: 10;
-    ${StyledSpanWithEllipsis} {
-      ${({ wrapText }) => !wrapText && css`
-          ${wrapTextStyles}
-        `}
-    }
+  z-index: ${({ expanded }) => expanded ? 10 : "auto"};
+  /* Keep this interpolation always present — making it conditional changes the styled wrapper's hook
+     count between renders. */
+  ${StyledSpanWithEllipsis} {
+    ${({ expanded }) => expanded && css`
+        ${wrapTextStyles}
+      `}
   }
 
   &:hover {
@@ -219,10 +218,10 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
           &:focus {
             &:before {
               ${buttonShape === CHIP_SHAPES.ROUND ? css`
-                    border: 2px solid ${({ theme }) => theme.colors.brand[800]};
-                  ` : css`
-                    border: 2px solid ${({ theme }) => theme.colors.brand[700]};
-                  `}
+                      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
+                    ` : css`
+                      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+                    `}
             }
           }
         `}

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "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}\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[200]};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\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' | 'wrapText'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\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  &:hover,\n  &:focus {\n    z-index: 10;\n    ${StyledSpanWithEllipsis} {\n      ${({ wrapText }) =>\n        !wrapText &&\n        css`\n          ${wrapTextStyles}\n        `}\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              ${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"],
-  "mappings": "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",
+  "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"],
+  "mappings": "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",
   "names": []
 }