@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.210

package/lib/atoms/OptionsList/Option/styles.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledLabelDetails = exports.StyledLabel = exports.DecorationComponentContainer = exports.StyleLabelWrapper = exports.Container = exports.StyledLink = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Link = _interopRequireWildcard(require("../../../components/Link"));
+
+var _Typography = require("../../../components/Typography");
+
+var _styleModifiers = require("../../../utils/styleModifiers");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../../utils/focusRingWithColor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var enabledFGColor = _designTokens.color.interaction.pacificOcean;
+var disabledFGColor = _designTokens.color.opacity.charcoal40;
+var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "styles__StyledLink",
+  componentId: "sc-1vr9h8x-0"
+})(["&&,&&:hover:not(:active),&&:focus:not(:active){text-decoration:none;", ";", ";}"], (0, _Link.linkColorStyles)(enabledFGColor, enabledFGColor, enabledFGColor), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["", ";cursor:not-allowed;"], (0, _Link.linkColorStyles)(disabledFGColor, disabledFGColor, disabledFGColor))));
+exports.StyledLink = StyledLink;
+
+var withSizeModifiers = function withSizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'medium') return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.header4), "".concat((0, _rem.default)(10), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(10), " ").concat((0, _rem.default)(10)));
+  return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph), "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)));
+};
+
+function getBorderRadius(_ref) {
+  var borderRadius = _ref.borderRadius;
+  return borderRadius || '2px';
+}
+
+var Container = _styledComponents.default.li.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1vr9h8x-1"
+})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
+  var pointerEvents = _ref2.pointerEvents;
+  return pointerEvents;
+}, withSizeModifiers, (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean15), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.opacity.charcoal40));
+
+exports.Container = Container;
+
+var StyleLabelWrapper = _styledComponents.default.div.withConfig({
+  displayName: "styles__StyleLabelWrapper",
+  componentId: "sc-1vr9h8x-2"
+})(["display:flex;flex:1;flex-direction:column;"]);
+
+exports.StyleLabelWrapper = StyleLabelWrapper;
+
+var DecorationComponentContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__DecorationComponentContainer",
+  componentId: "sc-1vr9h8x-3"
+})(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"])));
+
+exports.DecorationComponentContainer = DecorationComponentContainer;
+var StyledLabel = (0, _styledComponents.default)(_Typography.P).attrs({
+  as: 'span',
+  color: 'inherit'
+}).withConfig({
+  displayName: "styles__StyledLabel",
+  componentId: "sc-1vr9h8x-4"
+})(["font-size:inherit;"]);
+exports.StyledLabel = StyledLabel;
+var StyledLabelDetails = (0, _styledComponents.default)(_Typography.P).attrs({
+  as: 'span',
+  shade: 1
+}).withConfig({
+  displayName: "styles__StyledLabelDetails",
+  componentId: "sc-1vr9h8x-5"
+})([""]);
+exports.StyledLabelDetails = StyledLabelDetails;

package/lib/atoms/OptionsList/context.d.ts

@@ -12,6 +12,7 @@ export interface CtxValue {
     setInputMethod: (newInputMethod: InputMethod) => void;
     selectable?: boolean;
     itemRole?: string;
+    pointerEvents?: OptionsListProps['pointerEvents'];
 }
 declare const OptionsListContextProvider: import("react").ProviderExoticComponent<import("react").ProviderProps<CtxValue>>;
 declare const useOptionsList: () => CtxValue;

package/lib/atoms/OptionsList/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAYxD,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,QAAA,MAAM,0BAA0B,kFAA8B,CAAC;AAE/D,QAAA,MAAM,cAAc,gBACY,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAYxD,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACnD;AAGD,QAAA,MAAM,0BAA0B,kFAA8B,CAAC;AAE/D,QAAA,MAAM,cAAc,gBACY,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,CAAC"}

package/lib/atoms/OptionsList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAgSF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAiC5D,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAiTF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}

package/lib/atoms/OptionsList/index.js

@@ -86,13 +86,13 @@ var Container = _styledComponents.default.ul.withConfig({
   componentId: "sc-107p8d5-0"
 })(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
   var minWidth = _ref.minWidth;
-  return minWidth ? "\n          min-width: ".concat(minWidth, ";\n        ") : '';
+  return minWidth ? "\nmin-width: ".concat(minWidth, ";\n") : '';
 }, function (_ref2) {
   var maxWidth = _ref2.maxWidth;
-  return maxWidth ? "\n          max-width: ".concat(maxWidth, ";\n        ") : '';
+  return maxWidth ? "\nmax-width: ".concat(maxWidth, ";\n") : '';
 }, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
-  return maxHeight ? "\n          max-height: ".concat(maxHeight, ";\n        ") : '';
+  return maxHeight ? "\nmax-height: ".concat(maxHeight, ";\n") : '';
 });
 
 exports.Container = Container;
@@ -110,14 +110,18 @@ function OptionsList(props, forwardedRef) {
       activeIdProp = props.activeId,
       onChangeActiveItem = props.onChangeActiveItem,
       onKeyDownProp = props.onKeyDown,
+      showCheckbox = props.showCheckbox,
       tabIndex = props.tabIndex,
       selectable = props.selectable,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
       defaultSelected = props.defaultSelected,
       itemRole = props.itemRole,
       role = props.role,
       minWidth = props.minWidth,
       maxWidth = props.maxWidth,
-      maxHeight = props.maxHeight;
+      maxHeight = props.maxHeight,
+      pointerEvents = props.pointerEvents;
   var initialIds = selectedIdsProp || defaultSelected;
 
   var _useState = (0, _react.useState)(null),
@@ -232,7 +236,7 @@ function OptionsList(props, forwardedRef) {
   }, [containerRef, activeId, inputMethod, previousActiveId]);
 
   var setContainerRefFunc = function setContainerRefFunc(el) {
-    _react.forwardRef && (0, _assignRef.default)(forwardedRef, el);
+    (0, _assignRef.default)(forwardedRef, el);
     setContainerRef(el);
   };
 
@@ -274,7 +278,8 @@ function OptionsList(props, forwardedRef) {
       setInputMethod: setInputMethod,
       updateActiveId: updateActiveId,
       selectable: !!selectable,
-      itemRole: itemRole
+      itemRole: itemRole,
+      pointerEvents: pointerEvents
     }
   }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(Container, {
     "aria-activedescendant": activeId,
@@ -297,13 +302,17 @@ function OptionsList(props, forwardedRef) {
     if ((0, _utils.isCategory)(item)) {
       return _react.default.createElement(_Category.default, _extends({}, item, {
         key: id,
-        borderRadius: borderRadius
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size
       }));
     }
 
     return _react.default.createElement(_Option.default, _extends({}, item, {
       key: id,
-      borderRadius: borderRadius
+      borderRadius: borderRadius,
+      showCheckbox: showCheckbox,
+      size: size
     }));
   }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
     actions: actions
@@ -328,7 +337,9 @@ OptionsListWithContainerRef.defaultProps = {
   role: 'listbox',
   itemRole: 'option',
   tabIndex: 0,
-  selectable: true
+  selectable: true,
+  showCheckbox: true,
+  size: 'small'
 };
 var _default = OptionsListWithContainerRef;
 exports.default = _default;