@mackin.com/styleguide 11.0.10 → 11.0.12

package/index.esm.js

@@ -1223,7 +1223,9 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     const selected = selectedResultIndex === listItemIndex;
-                    return (React.createElement(ListItem, { key: v, variant: "full", className: cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected },
+                    return (React.createElement(ListItem, { key: v, variant: "full", className: cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected, onClick: () => {
+                            onPickValue(v, true);
+                        } },
                         React.createElement(Text, { tag: "div", ellipsis: true, align: "left", className: listItemTextStyles }, v)));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React.createElement(ListItem, { className: p.listItemClassName },
@@ -1612,55 +1614,37 @@ const Checkbox = (props) => {
             finalCheckedColor = checkedColor;
         }
     }
-    const checkboxStyles = css `
-		display: inline-block;
-		${!props.disabled && !readOnly && `
-			&:hover {
-				filter: ${theme.controls.hoverBrightness};
-			}
-		`}
-	`;
-    const labelStyles = css `
-		cursor: pointer;
-		user-select: none;
-		display: flex;
-		align-items: center;
-		${props.disabled && `
-			cursor: not-allowed;
-		`}
-		${readOnly && `
-			cursor: default;
-		`}
-	`;
-    // had to reference a marker class ('checkboxIcon') here for the sibling selector to work.
-    // opacity: 0 required for firefox.  ignores the width of 0.
-    const nativeCheckboxStyles = css `
-		margin: 0;
-		padding: 0;
-		width: 0;
-		opacity: 0; 
-
-		${!readOnly && `
-			&:focus + .checkboxIcon {
-				box-shadow: ${theme.controls.focusOutlineShadow};
-			}
-		`}
-	`;
-    const iconStyles = css `
-		${!!label && !hideLabel && `
-			margin-right: 0.5rem;
-		`}
-		${props.disabled && `
-			background-color: ${theme.colors.disabled};
-			cursor: not-allowed;
-		`}
-		${readOnly && `
-			cursor: default;
-		`}
-		${props.checked && `
-			color: ${finalCheckedColor}
-		`}
-	`;
+    const checkboxStyles = css({
+        display: 'inline-block',
+        '&:hover': (!props.disabled && !readOnly) ? {
+            filter: theme.controls.hoverBrightness
+        } : undefined
+    });
+    const cursor = props.disabled ? 'not-allowed' : props.readOnly ? 'default' : 'pointer';
+    const labelStyles = css({
+        cursor,
+        userSelect: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative'
+    });
+    const nativeCheckboxStyles = css({
+        margin: 0,
+        padding: 0,
+        inset: 0,
+        position: 'absolute',
+        opacity: 0,
+        cursor,
+        '&:focus + .checkboxIcon': !readOnly ? {
+            boxShadow: theme.controls.focusOutlineShadow
+        } : undefined
+    });
+    const iconStyles = css({
+        marginRight: (!!label && !hideLabel) ? '0.5rem' : undefined,
+        backgroundColor: props.disabled ? theme.colors.disabled : undefined,
+        cursor,
+        color: props.checked ? finalCheckedColor : uncheckedIcon
+    });
     return (React.createElement("span", { className: cx('checkbox', checkboxStyles, props.className) },
         React.createElement("label", { className: labelStyles },
             React.createElement("input", Object.assign({}, inputProps, { "aria-label": hideLabel ? label : undefined, tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
@@ -4158,6 +4142,7 @@ const Slider = (p) => {
                             width: '100%'
                         }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
             }, renderThumb: (props, state) => {
+                var _a;
                 const { className } = props, rest = __rest(props, ["className"]);
                 let specificThumbStyles;
                 if (p.handle1ClassName && props.key === 'thumb-0') {
@@ -4187,7 +4172,7 @@ const Slider = (p) => {
                     }), specificThumbStyles, p.handleClassName, css({
                         width: sliderHandleSize,
                         height: sliderHandleSize,
-                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    })) }, rest, { tabIndex: (_a = p.tabIndex) !== null && _a !== void 0 ? _a : 0 }), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {

package/index.js

@@ -1241,7 +1241,9 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     const selected = selectedResultIndex === listItemIndex;
-                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: css.cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected },
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: css.cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected, onClick: () => {
+                            onPickValue(v, true);
+                        } },
                         React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left", className: listItemTextStyles }, v)));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React__namespace.createElement(ListItem, { className: p.listItemClassName },
@@ -1630,55 +1632,37 @@ const Checkbox = (props) => {
             finalCheckedColor = checkedColor;
         }
     }
-    const checkboxStyles = css.css `
-		display: inline-block;
-		${!props.disabled && !readOnly && `
-			&:hover {
-				filter: ${theme.controls.hoverBrightness};
-			}
-		`}
-	`;
-    const labelStyles = css.css `
-		cursor: pointer;
-		user-select: none;
-		display: flex;
-		align-items: center;
-		${props.disabled && `
-			cursor: not-allowed;
-		`}
-		${readOnly && `
-			cursor: default;
-		`}
-	`;
-    // had to reference a marker class ('checkboxIcon') here for the sibling selector to work.
-    // opacity: 0 required for firefox.  ignores the width of 0.
-    const nativeCheckboxStyles = css.css `
-		margin: 0;
-		padding: 0;
-		width: 0;
-		opacity: 0; 
-
-		${!readOnly && `
-			&:focus + .checkboxIcon {
-				box-shadow: ${theme.controls.focusOutlineShadow};
-			}
-		`}
-	`;
-    const iconStyles = css.css `
-		${!!label && !hideLabel && `
-			margin-right: 0.5rem;
-		`}
-		${props.disabled && `
-			background-color: ${theme.colors.disabled};
-			cursor: not-allowed;
-		`}
-		${readOnly && `
-			cursor: default;
-		`}
-		${props.checked && `
-			color: ${finalCheckedColor}
-		`}
-	`;
+    const checkboxStyles = css.css({
+        display: 'inline-block',
+        '&:hover': (!props.disabled && !readOnly) ? {
+            filter: theme.controls.hoverBrightness
+        } : undefined
+    });
+    const cursor = props.disabled ? 'not-allowed' : props.readOnly ? 'default' : 'pointer';
+    const labelStyles = css.css({
+        cursor,
+        userSelect: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative'
+    });
+    const nativeCheckboxStyles = css.css({
+        margin: 0,
+        padding: 0,
+        inset: 0,
+        position: 'absolute',
+        opacity: 0,
+        cursor,
+        '&:focus + .checkboxIcon': !readOnly ? {
+            boxShadow: theme.controls.focusOutlineShadow
+        } : undefined
+    });
+    const iconStyles = css.css({
+        marginRight: (!!label && !hideLabel) ? '0.5rem' : undefined,
+        backgroundColor: props.disabled ? theme.colors.disabled : undefined,
+        cursor,
+        color: props.checked ? finalCheckedColor : uncheckedIcon
+    });
     return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
         React__namespace.createElement("label", { className: labelStyles },
             React__namespace.createElement("input", Object.assign({}, inputProps, { "aria-label": hideLabel ? label : undefined, tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
@@ -4176,6 +4160,7 @@ const Slider = (p) => {
                             width: '100%'
                         }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
             }, renderThumb: (props, state) => {
+                var _a;
                 const { className } = props, rest = __rest(props, ["className"]);
                 let specificThumbStyles;
                 if (p.handle1ClassName && props.key === 'thumb-0') {
@@ -4205,7 +4190,7 @@ const Slider = (p) => {
                     }), specificThumbStyles, p.handleClassName, css.css({
                         width: sliderHandleSize,
                         height: sliderHandleSize,
-                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    })) }, rest, { tabIndex: (_a = p.tabIndex) !== null && _a !== void 0 ? _a : 0 }), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "11.0.10",
+    "version": "11.0.12",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",