@flodesk/grain 6.1.2 → 6.1.3
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.
- package/es/components/icon-toggle.js +11 -8
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
14
14
|
|
|
15
15
|
import { getColor } from '../utilities';
|
|
16
16
|
import { Icon } from '.';
|
|
17
|
-
import React from 'react';
|
|
17
|
+
import React, { forwardRef } from 'react';
|
|
18
18
|
import PropTypes from 'prop-types';
|
|
19
19
|
import { types } from '../types';
|
|
20
20
|
import { styles, componentVars } from '../foundational';
|
|
@@ -26,7 +26,7 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
|
|
|
26
26
|
} : {
|
|
27
27
|
target: "e9umpvt1",
|
|
28
28
|
label: "Wrapper"
|
|
29
|
-
})("display:flex;border:1px solid ", getColor('border2'), ";border-radius:var(--grn-radius-s);width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
29
|
+
})("display:flex;border:1px solid ", getColor('border2'), ";border-radius:var(--grn-radius-s);width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvaWNvbi10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMsIGNvbXBvbmVudFZhcnMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCB3aWR0aCA9IGBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSArIDJweClgO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRDb2xvcignYm9yZGVyMicpfTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcblxuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1sZWZ0OiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDA7XG4gIG1pbi13aWR0aDogJHt3aWR0aH07XG4gIGhlaWdodDogY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAycHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1pY29uKTtcblxuICAkeyh7IGlzQWN0aXZlIH0pID0+IGlzQWN0aXZlICYmIGAtLWdybi1jb2xvci1pY29uOiAke2dldENvbG9yKCdjb250ZW50Jyl9YH07XG5cbiAgJjpob3ZlciB7XG4gICAgLS1ncm4tY29sb3ItaWNvbjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuXG4gICYgKyAuSWNvblRvZ2dsZSB7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tY29sb3ItYm9yZGVyMik7XG4gIH1cblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgICR7cCA9PiBwLmlzQWN0aXZlICYmIGBib3gtc2hhZG93OiAwIDAgMCAxcHggJHtjb21wb25lbnRWYXJzLmFjdGl2ZUJvcmRlckNvbG9yfWB9O1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBtaW4td2lkdGg6IGNhbGMoJHt3aWR0aH0gLSAxcHgpO1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlOmFmdGVyIHtcbiAgICB3aWR0aDogY2FsYygxMDAlICsgMXB4KTtcbiAgICBsZWZ0OiAtMXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcykgMCAwIHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIH1cblxuICAmOmxhc3QtY2hpbGQ6YWZ0ZXIge1xuICAgIGJvcmRlci1yYWRpdXM6IDAgdmFyKC0tZ3JuLXJhZGl1cy1zKSB2YXIoLS1ncm4tcmFkaXVzLXMpIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBJY29uVG9nZ2xlID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaWNvbiwgaXNBY3RpdmUsIG9uQ2xpY2ssIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxJdGVtV3JhcHBlciByZWY9e3JlZn0gY2xhc3NOYW1lPVwiSWNvblRvZ2dsZVwiIGlzQWN0aXZlPXtpc0FjdGl2ZX0gb25DbGljaz17b25DbGlja30gey4uLnByb3BzfT5cbiAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IC8+fVxuICAgICAge2NoaWxkcmVuICYmIGNoaWxkcmVufVxuICAgIDwvSXRlbVdyYXBwZXI+XG4gICk7XG59KTtcblxuZXhwb3J0IGNvbnN0IEljb25Ub2dnbGVHcm91cCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8V3JhcHBlciByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvV3JhcHBlcj5cbikpO1xuXG5JY29uVG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG59O1xuXG5JY29uVG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiB0eXBlcy5pY29uLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
|
|
30
30
|
|
|
31
31
|
var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
|
|
32
32
|
target: "e9umpvt0"
|
|
@@ -38,9 +38,9 @@ var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "produ
|
|
|
38
38
|
return isActive && "--grn-color-icon: ".concat(getColor('content'));
|
|
39
39
|
}, ";&:hover{--grn-color-icon:", getColor('content'), ";}&+.IconToggle{border-color:var(--grn-color-border2);}&:after{content:'';pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;", function (p) {
|
|
40
40
|
return p.isActive && "box-shadow: 0 0 0 1px ".concat(componentVars.activeBorderColor);
|
|
41
|
-
}, ";}&:first-of-type{min-width:calc(", width, " - 1px);}&:first-of-type:after{width:calc(100% + 1px);left:-1px;border-radius:var(--grn-radius-s) 0 0 var(--grn-radius-s);}&:last-child:after{border-radius:0 var(--grn-radius-s) var(--grn-radius-s) 0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
41
|
+
}, ";}&:first-of-type{min-width:calc(", width, " - 1px);}&:first-of-type:after{width:calc(100% + 1px);left:-1px;border-radius:var(--grn-radius-s) 0 0 var(--grn-radius-s);}&:last-child:after{border-radius:0 var(--grn-radius-s) var(--grn-radius-s) 0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3Qgd2lkdGggPSBgY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gKyAycHgpYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0Q29sb3IoJ2JvcmRlcjInKX07XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbmA7XG5cbmNvbnN0IEl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwO1xuICBtaW4td2lkdGg6ICR7d2lkdGh9O1xuICBoZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gMnB4KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItaWNvbik7XG5cbiAgJHsoeyBpc0FjdGl2ZSB9KSA9PiBpc0FjdGl2ZSAmJiBgLS1ncm4tY29sb3ItaWNvbjogJHtnZXRDb2xvcignY29udGVudCcpfWB9O1xuXG4gICY6aG92ZXIge1xuICAgIC0tZ3JuLWNvbG9yLWljb246ICR7Z2V0Q29sb3IoJ2NvbnRlbnQnKX07XG4gIH1cblxuICAmICsgLkljb25Ub2dnbGUge1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWJvcmRlcjIpO1xuICB9XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICAke3AgPT4gcC5pc0FjdGl2ZSAmJiBgYm94LXNoYWRvdzogMCAwIDAgMXB4ICR7Y29tcG9uZW50VmFycy5hY3RpdmVCb3JkZXJDb2xvcn1gfTtcbiAgfVxuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgbWluLXdpZHRoOiBjYWxjKCR7d2lkdGh9IC0gMXB4KTtcbiAgfVxuXG4gICY6Zmlyc3Qtb2YtdHlwZTphZnRlciB7XG4gICAgd2lkdGg6IGNhbGMoMTAwJSArIDFweCk7XG4gICAgbGVmdDogLTFweDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ncm4tcmFkaXVzLXMpIDAgMCB2YXIoLS1ncm4tcmFkaXVzLXMpO1xuICB9XG5cbiAgJjpsYXN0LWNoaWxkOmFmdGVyIHtcbiAgICBib3JkZXItcmFkaXVzOiAwIHZhcigtLWdybi1yYWRpdXMtcykgdmFyKC0tZ3JuLXJhZGl1cy1zKSAwO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvblRvZ2dsZSA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGljb24sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8SXRlbVdyYXBwZXIgcmVmPXtyZWZ9IGNsYXNzTmFtZT1cIkljb25Ub2dnbGVcIiBpc0FjdGl2ZT17aXNBY3RpdmV9IG9uQ2xpY2s9e29uQ2xpY2t9IHsuLi5wcm9wc30+XG4gICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSAvPn1cbiAgICAgIHtjaGlsZHJlbiAmJiBjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufSk7XG5cbmV4cG9ydCBjb25zdCBJY29uVG9nZ2xlR3JvdXAgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFdyYXBwZXIgcmVmPXtyZWZ9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pKTtcblxuSWNvblRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuSWNvblRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogdHlwZXMuaWNvbixcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
|
|
42
42
|
|
|
43
|
-
export var IconToggle = function
|
|
43
|
+
export var IconToggle = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
44
44
|
var children = _ref2.children,
|
|
45
45
|
icon = _ref2.icon,
|
|
46
46
|
isActive = _ref2.isActive,
|
|
@@ -48,19 +48,22 @@ export var IconToggle = function IconToggle(_ref2) {
|
|
|
48
48
|
props = _objectWithoutProperties(_ref2, _excluded);
|
|
49
49
|
|
|
50
50
|
return ___EmotionJSX(ItemWrapper, _extends({
|
|
51
|
+
ref: ref,
|
|
51
52
|
className: "IconToggle",
|
|
52
53
|
isActive: isActive,
|
|
53
54
|
onClick: onClick
|
|
54
55
|
}, props), icon && ___EmotionJSX(Icon, {
|
|
55
56
|
icon: icon
|
|
56
57
|
}), children && children);
|
|
57
|
-
};
|
|
58
|
-
export var IconToggleGroup = function
|
|
58
|
+
});
|
|
59
|
+
export var IconToggleGroup = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
59
60
|
var children = _ref3.children,
|
|
60
61
|
props = _objectWithoutProperties(_ref3, _excluded2);
|
|
61
62
|
|
|
62
|
-
return ___EmotionJSX(Wrapper,
|
|
63
|
-
|
|
63
|
+
return ___EmotionJSX(Wrapper, _extends({
|
|
64
|
+
ref: ref
|
|
65
|
+
}, props), children);
|
|
66
|
+
});
|
|
64
67
|
IconToggleGroup.propTypes = {
|
|
65
68
|
children: PropTypes.node
|
|
66
69
|
};
|