@elliemae/ds-form-checkbox 3.1.0-next.2 → 3.1.0-next.20

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 (13) hide show
  1. package/dist/cjs/ControlledCheckbox.js +2 -1
  2. package/dist/cjs/ControlledCheckbox.js.map +2 -2
  3. package/dist/cjs/styles.js +13 -1
  4. package/dist/cjs/styles.js.map +2 -2
  5. package/dist/cjs/utils/styleHelpers.js +12 -0
  6. package/dist/cjs/utils/styleHelpers.js.map +2 -2
  7. package/dist/esm/ControlledCheckbox.js +2 -1
  8. package/dist/esm/ControlledCheckbox.js.map +2 -2
  9. package/dist/esm/styles.js +13 -1
  10. package/dist/esm/styles.js.map +2 -2
  11. package/dist/esm/utils/styleHelpers.js +12 -0
  12. package/dist/esm/utils/styleHelpers.js.map +2 -2
  13. package/package.json +20 -21
package/dist/cjs/ControlledCheckbox.js CHANGED
@@ -129,7 +129,8 @@ const DSControlledCheckbox = (props) => {
129
129
  type: "checkbox",
130
130
  checked,
131
131
  onChange,
132
- disabled
132
+ disabled,
133
+ tabIndex
133
134
  }, commonProps))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, __spreadValues({
134
135
  htmlFor: id,
135
136
  disabled,
package/dist/cjs/ControlledCheckbox.js.map CHANGED
@@ -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 {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n // if not tab index supplied we set 0 to force being focusable because this is a div\n tabIndex={tabIndex ?? 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,KAC3B,cAHL;AAAA,IAIC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAE7C,UAAU,YAAY;AAAA,IACtB,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 && 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 {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n // if not tab index supplied we set 0 to force being focusable because this is a div\n tabIndex={tabIndex ?? 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,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,KAC3B,cAHL;AAAA,IAIC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAE7C,UAAU,YAAY;AAAA,IACtB,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
  }
package/dist/cjs/styles.js CHANGED
@@ -39,18 +39,25 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
39
39
  display: inline-grid;
40
40
  grid-template-rows: min-content;
41
41
  grid-template-columns: ${({ theme }) => theme.space.xs} auto;
42
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
43
+ grid-template-columns: 24px auto;
44
+ }
42
45
  align-items: center;
43
46
  `;
44
47
  const StyledCheckBox = (0, import_ds_system.styled)("span")`
45
48
  width: ${({ theme }) => theme.space.xs};
46
49
  height: ${({ theme }) => theme.space.xs};
50
+ @media (max-width: ${(props) => props.theme.breakpoints.small}) {
51
+ width: 24px;
52
+ height: 24px;
53
+ }
47
54
  border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
48
55
  border-radius: 2px;
49
56
  position: relative;
50
57
  background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
51
58
  ${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError)}
52
59
  &:focus-within {
53
- ${({ theme, hasError, disabled }) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} ` : void 0};
60
+ ${({ 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
61
  &:hover {
55
62
  ${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true)}
56
63
  }
@@ -98,6 +105,11 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
98
105
  color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
99
106
  font-size: 13px;
100
107
  line-height: 13px;
108
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
109
+ font-size: 16px;
110
+ line-height: 16px;
111
+ ${({ wrapLabel, theme }) => wrapLabel ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};` : `padding-left: ${theme.space.xs}`};
112
+ }
101
113
  display: inherit;
102
114
 
103
115
  ${({ disabled }) => disabled ? `&:hover {
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": ["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 @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\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 @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\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 @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};`\n : `padding-left: ${theme.space.xs}`};\n }\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,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,iBAAiB,6BAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,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,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,6BAAO,MAAM;",
6
6
  "names": []
7
7
  }
package/dist/cjs/utils/styleHelpers.js CHANGED
@@ -48,6 +48,12 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
48
48
  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
49
49
  width: ${theme.space.xxs};
50
50
  height: 2px;
51
+ @media (max-width: ${theme.breakpoints.small}) {
52
+ top: 10px;
53
+ left: 5px;
54
+ height: 2px;
55
+ width: 12px;
56
+ }
51
57
  }`;
52
58
  }
53
59
  if (checked) {
@@ -61,6 +67,12 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
61
67
  height: 5px;
62
68
  width: 10px;
63
69
  transform: rotate(-45deg);
70
+ @media (max-width: ${theme.breakpoints.small}) {
71
+ top: 5px;
72
+ left: 3px;
73
+ height: 8px;
74
+ width: 17px;
75
+ }
64
76
  }`;
65
77
  }
66
78
  return "";
package/dist/cjs/utils/styleHelpers.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering && checked !== false) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n if (checked === 'mixed') {\n return `&:before {\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n }`;\n }\n if (checked) {\n return `&:before {\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,aAClF,MAAM,MAAM;AAAA;AAAA;AAAA,EAGvB;AACA,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,qCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhH;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
4
+ "sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering && checked !== false) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n if (checked === 'mixed') {\n return `&:before {\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n @media (max-width: ${theme.breakpoints.small}) {\n top: 10px;\n left: 5px;\n height: 2px;\n width: 12px;\n }\n }`;\n }\n if (checked) {\n return `&:before {\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,aAClF,MAAM,MAAM;AAAA;AAAA,yBAEA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzC;AACA,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,qCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA,+BAInF,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/C;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
6
6
  "names": []
7
7
  }
package/dist/esm/ControlledCheckbox.js CHANGED
@@ -110,7 +110,8 @@ const DSControlledCheckbox = (props) => {
110
110
  type: "checkbox",
111
111
  checked,
112
112
  onChange,
113
- disabled
113
+ disabled,
114
+ tabIndex
114
115
  }, commonProps))), label && /* @__PURE__ */ React2.createElement(StyledLabel, __spreadValues({
115
116
  htmlFor: id,
116
117
  disabled,
package/dist/esm/ControlledCheckbox.js.map CHANGED
@@ -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 {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n // if not tab index supplied we set 0 to force being focusable because this is a div\n tabIndex={tabIndex ?? 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,KAC3B,cAHL;AAAA,IAIC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAE7C,UAAU,YAAY;AAAA,IACtB,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 && 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 {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n // if not tab index supplied we set 0 to force being focusable because this is a div\n tabIndex={tabIndex ?? 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,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,KAC3B,cAHL;AAAA,IAIC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAE7C,UAAU,YAAY;AAAA,IACtB,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
  }
package/dist/esm/styles.js CHANGED
@@ -9,18 +9,25 @@ const StyledContainer = styled("div", {
9
9
  display: inline-grid;
10
10
  grid-template-rows: min-content;
11
11
  grid-template-columns: ${({ theme }) => theme.space.xs} auto;
12
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
13
+ grid-template-columns: 24px auto;
14
+ }
12
15
  align-items: center;
13
16
  `;
14
17
  const StyledCheckBox = styled("span")`
15
18
  width: ${({ theme }) => theme.space.xs};
16
19
  height: ${({ theme }) => theme.space.xs};
20
+ @media (max-width: ${(props) => props.theme.breakpoints.small}) {
21
+ width: 24px;
22
+ height: 24px;
23
+ }
17
24
  border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
18
25
  border-radius: 2px;
19
26
  position: relative;
20
27
  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
21
28
  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
22
29
  &:focus-within {
23
- ${({ theme, hasError, disabled }) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} ` : void 0};
30
+ ${({ 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
31
  &:hover {
25
32
  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
26
33
  }
@@ -68,6 +75,11 @@ const StyledLabel = styled("label", {
68
75
  color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
69
76
  font-size: 13px;
70
77
  line-height: 13px;
78
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
79
+ font-size: 16px;
80
+ line-height: 16px;
81
+ ${({ wrapLabel, theme }) => wrapLabel ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};` : `padding-left: ${theme.space.xs}`};
82
+ }
71
83
  display: inherit;
72
84
 
73
85
  ${({ disabled }) => disabled ? `&:hover {
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", "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 @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\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 @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\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 @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};`\n : `padding-left: ${theme.space.xs}`};\n }\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,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,iBAAiB,OAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,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,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;",
6
6
  "names": []
7
7
  }
package/dist/esm/utils/styleHelpers.js CHANGED
@@ -21,6 +21,12 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
21
21
  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
22
22
  width: ${theme.space.xxs};
23
23
  height: 2px;
24
+ @media (max-width: ${theme.breakpoints.small}) {
25
+ top: 10px;
26
+ left: 5px;
27
+ height: 2px;
28
+ width: 12px;
29
+ }
24
30
  }`;
25
31
  }
26
32
  if (checked) {
@@ -34,6 +40,12 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
34
40
  height: 5px;
35
41
  width: 10px;
36
42
  transform: rotate(-45deg);
43
+ @media (max-width: ${theme.breakpoints.small}) {
44
+ top: 5px;
45
+ left: 3px;
46
+ height: 8px;
47
+ width: 17px;
48
+ }
37
49
  }`;
38
50
  }
39
51
  return "";
package/dist/esm/utils/styleHelpers.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering && checked !== false) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n if (checked === 'mixed') {\n return `&:before {\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n }`;\n }\n if (checked) {\n return `&:before {\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n"],
5
- "mappings": "AAAA;ACGO,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,aAClF,MAAM,MAAM;AAAA;AAAA;AAAA,EAGvB;AACA,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,qCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhH;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering && checked !== false) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n if (checked === 'mixed') {\n return `&:before {\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n @media (max-width: ${theme.breakpoints.small}) {\n top: 10px;\n left: 5px;\n height: 2px;\n width: 12px;\n }\n }`;\n }\n if (checked) {\n return `&:before {\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n"],
5
+ "mappings": "AAAA;ACGO,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,aAClF,MAAM,MAAM;AAAA;AAAA,yBAEA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzC;AACA,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,qCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA,+BAInF,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/C;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
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.0-next.2",
3
+ "version": "3.1.0-next.20",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Checkbox",
6
6
  "files": [
@@ -34,37 +34,36 @@
34
34
  "reportFile": "tests.xml",
35
35
  "indent": 4
36
36
  },
37
- "scripts": {
38
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
39
- "test": "node ../../scripts/testing/test.mjs",
40
- "lint": "node ../../scripts/lint.mjs",
41
- "dts": "node ../../scripts/dts.mjs",
42
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
43
- },
44
37
  "dependencies": {
45
- "@elliemae/ds-system": "3.1.0-next.2",
46
- "@elliemae/ds-truncated-tooltip-text": "3.1.0-next.2",
47
- "@elliemae/ds-utilities": "3.1.0-next.2",
48
- "uid": "~2.0.0"
38
+ "@elliemae/ds-system": "3.1.0-next.20",
39
+ "@elliemae/ds-truncated-tooltip-text": "3.1.0-next.20",
40
+ "@elliemae/ds-utilities": "3.1.0-next.20"
49
41
  },
50
42
  "devDependencies": {
51
- "@elliemae/pui-theme": "~2.5.0",
52
- "@testing-library/dom": "~8.11.3",
53
- "@testing-library/jest-dom": "~5.16.2",
54
- "@testing-library/react": "~12.1.2",
43
+ "@elliemae/pui-theme": "~2.6.0",
44
+ "@testing-library/dom": "~8.13.0",
45
+ "@testing-library/jest-dom": "~5.16.4",
46
+ "@testing-library/react": "~12.1.3",
55
47
  "@testing-library/user-event": "~13.5.0",
56
- "styled-components": "~5.3.3",
57
- "styled-system": "~5.1.5"
48
+ "styled-components": "~5.3.5"
58
49
  },
59
50
  "peerDependencies": {
60
- "@elliemae/pui-theme": "~2.5.0",
51
+ "@elliemae/pui-theme": "~2.6.0",
61
52
  "react": "^17.0.2",
62
53
  "react-dom": "^17.0.2",
63
- "styled-components": "^5.3.3",
54
+ "styled-components": "^5.3.5",
64
55
  "styled-system": "^5.1.5"
65
56
  },
66
57
  "publishConfig": {
67
58
  "access": "public",
68
59
  "typeSafety": false
60
+ },
61
+ "scripts": {
62
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
63
+ "test": "node ../../scripts/testing/test.mjs",
64
+ "lint": "node ../../scripts/lint.mjs",
65
+ "dts": "node ../../scripts/dts.mjs",
66
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
67
+ "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
69
68
  }
70
- }
69
+ }