@elliemae/ds-form-checkbox 3.1.5-rc.9 → 3.2.0-rc.1

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.
@@ -75,7 +75,8 @@ const DSControlledCheckbox = (props) => {
75
75
  ariaControls: legacyAriaControls
76
76
  } = propsWithDefault;
77
77
  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
78
- if (checkboxRef.current && e.key === "Enter") {
78
+ if (checkboxRef.current && ["Enter", "Space"].includes(e.code)) {
79
+ e.preventDefault();
79
80
  checkboxRef.current.click();
80
81
  }
81
82
  }, []);
@@ -130,7 +131,8 @@ const DSControlledCheckbox = (props) => {
130
131
  type: "checkbox",
131
132
  checked,
132
133
  onChange,
133
- disabled
134
+ disabled,
135
+ tabIndex
134
136
  }, commonProps))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, __spreadValues({
135
137
  htmlFor: id,
136
138
  disabled,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ControlledCheckbox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useRef, useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const checkboxRef = useRef<HTMLInputElement>(null);\n const {\n checked,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (checkboxRef.current && e.key === 'Enter') {\n checkboxRef.current.click();\n }\n }, []);\n\n const {\n id,\n disabled,\n readOnly,\n label: globalLabel,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n className,\n onChange,\n tabIndex,\n ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, { onKeyDown: handleOnKeyDown });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n onKeyDown: handleOnKeyDown,\n ...restGlobals,\n id,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n 'data-testid': 'ds-checkbox',\n };\n\n return (\n <StyledContainer data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n disabled={disabled}\n {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n />\n ) : (\n <StyledInput\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n {...commonProps}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={id}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n disabled={disabled}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8D;AAC9D,0BAKO;AACP,uCAA2C;AAC3C,oBAA6G;AAC7G,mCAA+D;AAC/D,6BAAgC;AAChC,8BAAiC;AAEjC,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;AAEjC,QAAM,cAAc,yBAAyB,IAAI;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,kBAAkB,8BAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,EAAE,QAAQ,SAAS;AAC5C,kBAAY,QAAQ,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAWI,qDAAoD,kBAAkB,EAAE,WAAW,gBAAgB,CAAC,GAVtG;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,wBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,WAAW;AAAA,KACR,cAFqD;AAAA,IAGxD;AAAA,IACA,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB;AAEA,SACE,mDAAC;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7E,mDAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvE,gBAAgB,qBACf,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B;AAAA,KACI,cAJL;AAAA,IAKC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK,CAAC,QAAQ,4CAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC9E,IAEA,mDAAC;AAAA,IACC,KAAK,CAAC,QAAQ,4CAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC5E,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,KACI,YACN,CAEJ,GACC,SACC,mDAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KACK,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC,IAEjF,YAAY,mDAAC,qCAAiB,KAAM,IAAqB,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,kCAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
4
+ "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useRef, useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const checkboxRef = useRef<HTMLInputElement>(null);\n const {\n checked,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (checkboxRef.current && ['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n checkboxRef.current.click();\n }\n }, []);\n\n const {\n id,\n disabled,\n readOnly,\n label: globalLabel,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n className,\n onChange,\n tabIndex,\n ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, { onKeyDown: handleOnKeyDown });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n onKeyDown: handleOnKeyDown,\n ...restGlobals,\n id,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n 'data-testid': 'ds-checkbox',\n };\n\n return (\n <StyledContainer data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n disabled={disabled}\n {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n />\n ) : (\n <StyledInput\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n tabIndex={tabIndex}\n {...commonProps}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={id}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n disabled={disabled}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8D;AAC9D,0BAKO;AACP,uCAA2C;AAC3C,oBAA6G;AAC7G,mCAA+D;AAC/D,6BAAgC;AAChC,8BAAiC;AAEjC,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;AAEjC,QAAM,cAAc,yBAAyB,IAAI;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,kBAAkB,8BAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9D,QAAE,eAAe;AACjB,kBAAY,QAAQ,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAWI,qDAAoD,kBAAkB,EAAE,WAAW,gBAAgB,CAAC,GAVtG;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,wBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,WAAW;AAAA,KACR,cAFqD;AAAA,IAGxD;AAAA,IACA,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB;AAEA,SACE,mDAAC;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7E,mDAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvE,gBAAgB,qBACf,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B;AAAA,KACI,cAJL;AAAA,IAKC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK,CAAC,QAAQ,4CAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC9E,IAEA,mDAAC;AAAA,IACC,KAAK,CAAC,QAAQ,4CAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC5E,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACI,YACN,CAEJ,GACC,SACC,mDAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KACK,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC,IAEjF,YAAY,mDAAC,qCAAiB,KAAM,IAAqB,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,kCAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -50,7 +50,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
50
50
  background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
51
51
  ${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError)}
52
52
  &:focus-within {
53
- ${({ theme, hasError, disabled }) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} ` : void 0};
53
+ ${({ theme, hasError, disabled }) => !disabled ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]} ` : void 0};
54
54
  &:hover {
55
55
  ${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true)}
56
56
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n align-items: center;\n`;\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled && !hasError\n ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n }\n }\n &:hover {\n background: ${({ theme, checked, disabled }) =>\n !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAAgD;AACzC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAI/C,MAAM,iBAAiB,6BAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,sBACjB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,+CAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,yCAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,YAAY,CAAC,WACV,qBAAqB,MAAM,OAAO,MAAM,6BAA6B,MAAM,OAAO,MAAM,UACxF;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,yCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhB,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,6BAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxE,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,6BAAO,MAAM;",
4
+ "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n align-items: center;\n`;\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n }\n }\n &:hover {\n background: ${({ theme, checked, disabled }) =>\n !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAAgD;AACzC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAI/C,MAAM,iBAAiB,6BAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,sBACjB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,+CAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,yCAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,yCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhB,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,6BAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxE,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,6BAAO,MAAM;",
6
6
  "names": []
7
7
  }
@@ -56,7 +56,8 @@ const DSControlledCheckbox = (props) => {
56
56
  ariaControls: legacyAriaControls
57
57
  } = propsWithDefault;
58
58
  const handleOnKeyDown = useCallback((e) => {
59
- if (checkboxRef.current && e.key === "Enter") {
59
+ if (checkboxRef.current && ["Enter", "Space"].includes(e.code)) {
60
+ e.preventDefault();
60
61
  checkboxRef.current.click();
61
62
  }
62
63
  }, []);
@@ -111,7 +112,8 @@ const DSControlledCheckbox = (props) => {
111
112
  type: "checkbox",
112
113
  checked,
113
114
  onChange,
114
- disabled
115
+ disabled,
116
+ tabIndex
115
117
  }, commonProps))), label && /* @__PURE__ */ React2.createElement(StyledLabel, __spreadValues({
116
118
  htmlFor: id,
117
119
  disabled,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useRef, useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const checkboxRef = useRef<HTMLInputElement>(null);\n const {\n checked,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (checkboxRef.current && e.key === 'Enter') {\n checkboxRef.current.click();\n }\n }, []);\n\n const {\n id,\n disabled,\n readOnly,\n label: globalLabel,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n className,\n onChange,\n tabIndex,\n ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, { onKeyDown: handleOnKeyDown });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n onKeyDown: handleOnKeyDown,\n ...restGlobals,\n id,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n 'data-testid': 'ds-checkbox',\n };\n\n return (\n <StyledContainer data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n disabled={disabled}\n {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n />\n ) : (\n <StyledInput\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n {...commonProps}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={id}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n disabled={disabled}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AAEjC,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,EAAE,QAAQ,SAAS;AAC5C,kBAAY,QAAQ,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAWI,4BAAoD,kBAAkB,EAAE,WAAW,gBAAgB,CAAC,GAVtG;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,wBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,WAAW;AAAA,KACR,cAFqD;AAAA,IAGxD;AAAA,IACA,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB;AAEA,SACE,qCAAC;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7E,qCAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvE,gBAAgB,qBACf,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B;AAAA,KACI,cAJL;AAAA,IAKC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC9E,IAEA,qCAAC;AAAA,IACC,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC5E,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,KACI,YACN,CAEJ,GACC,SACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KACK,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC,IAEjF,YAAY,qCAAC,uBAAiB,KAAM,IAAqB,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useRef, useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const checkboxRef = useRef<HTMLInputElement>(null);\n const {\n checked,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (checkboxRef.current && ['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n checkboxRef.current.click();\n }\n }, []);\n\n const {\n id,\n disabled,\n readOnly,\n label: globalLabel,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n className,\n onChange,\n tabIndex,\n ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, { onKeyDown: handleOnKeyDown });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n onKeyDown: handleOnKeyDown,\n ...restGlobals,\n id,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n 'data-testid': 'ds-checkbox',\n };\n\n return (\n <StyledContainer data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n disabled={disabled}\n {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n />\n ) : (\n <StyledInput\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n tabIndex={tabIndex}\n {...commonProps}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={id}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n disabled={disabled}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AAEjC,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9D,QAAE,eAAe;AACjB,kBAAY,QAAQ,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAWI,4BAAoD,kBAAkB,EAAE,WAAW,gBAAgB,CAAC,GAVtG;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,wBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,WAAW;AAAA,KACR,cAFqD;AAAA,IAGxD;AAAA,IACA,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB;AAEA,SACE,qCAAC;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7E,qCAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvE,gBAAgB,qBACf,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B;AAAA,KACI,cAJL;AAAA,IAKC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC9E,IAEA,qCAAC;AAAA,IACC,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC5E,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACI,YACN,CAEJ,GACC,SACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KACK,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC,IAEjF,YAAY,qCAAC,uBAAiB,KAAM,IAAqB,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -20,7 +20,7 @@ const StyledCheckBox = styled("span")`
20
20
  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
21
21
  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
22
22
  &:focus-within {
23
- ${({ theme, hasError, disabled }) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} ` : void 0};
23
+ ${({ theme, hasError, disabled }) => !disabled ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]} ` : void 0};
24
24
  &:hover {
25
25
  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
26
26
  }
@@ -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", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n align-items: center;\n`;\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled && !hasError\n ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n }\n }\n &:hover {\n background: ${({ theme, checked, disabled }) =>\n !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n"],
5
- "mappings": "AAAA;ACAA;AAEA;AACA;AACO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAI/C,MAAM,iBAAiB,OAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,sBACjB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,sBAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,gBAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,YAAY,CAAC,WACV,qBAAqB,MAAM,OAAO,MAAM,6BAA6B,MAAM,OAAO,MAAM,UACxF;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxE,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n align-items: center;\n`;\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n }\n }\n &:hover {\n background: ${({ theme, checked, disabled }) =>\n !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n"],
5
+ "mappings": "AAAA;ACAA;AAEA;AACA;AACO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAI/C,MAAM,iBAAiB,OAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,sBACjB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,sBAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,gBAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxE,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-checkbox",
3
- "version": "3.1.5-rc.9",
3
+ "version": "3.2.0-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Checkbox",
6
6
  "files": [
@@ -35,23 +35,23 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-system": "3.1.5-rc.9",
39
- "@elliemae/ds-truncated-tooltip-text": "3.1.5-rc.9",
40
- "@elliemae/ds-utilities": "3.1.5-rc.9"
38
+ "@elliemae/ds-system": "3.2.0-rc.1",
39
+ "@elliemae/ds-truncated-tooltip-text": "3.2.0-rc.1",
40
+ "@elliemae/ds-utilities": "3.2.0-rc.1"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@elliemae/pui-theme": "~2.6.0",
44
- "@testing-library/dom": "~8.11.3",
45
- "@testing-library/jest-dom": "~5.16.2",
46
- "@testing-library/react": "~12.1.2",
44
+ "@testing-library/dom": "~8.13.0",
45
+ "@testing-library/jest-dom": "~5.16.4",
46
+ "@testing-library/react": "~12.1.3",
47
47
  "@testing-library/user-event": "~13.5.0",
48
- "styled-components": "~5.3.3"
48
+ "styled-components": "~5.3.5"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "@elliemae/pui-theme": "~2.6.0",
52
52
  "react": "^17.0.2",
53
53
  "react-dom": "^17.0.2",
54
- "styled-components": "^5.3.3",
54
+ "styled-components": "^5.3.5",
55
55
  "styled-system": "^5.1.5"
56
56
  },
57
57
  "publishConfig": {