@decisiv/ui-components 2.0.1-alpha.99 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,cAAc,EAAgB,cAAc,EAAE,MAAM,SAAS,CAAC;AAIvE,UAAU,iBAAiB;IACzB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CACpD;AAED,wBAAgB,gBAAgB,IAAI,iBAAiB,CA0BpD;AAoDD,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAkKpD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,cAAc,EAAgB,cAAc,EAAE,MAAM,SAAS,CAAC;AAIvE,UAAU,iBAAiB;IACzB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CACpD;AAED,wBAAgB,gBAAgB,IAAI,iBAAiB,CA0BpD;AA0DD,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqLpD;AAED,eAAe,QAAQ,CAAC"}

package/lib/atoms/Calendar/index.js

@@ -12,12 +12,16 @@ var _range = _interopRequireDefault(require("lodash/range"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _ArrowLeft = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowLeft"));
 
 var _ArrowRight = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowRight"));
 
 var _Button = _interopRequireDefault(require("../../components/Button"));
 
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
 var _Flex = _interopRequireDefault(require("../../components/Flex"));
 
 var _Grid = _interopRequireDefault(require("../../components/Grid"));
@@ -117,9 +121,14 @@ function getSelectedRangeModifier(currentDisplayDate, selectedDates) {
   return undefined;
 }
 
+var LabelWrapper = (0, _styledComponents.default)(_Typography.P).withConfig({
+  displayName: "Calendar__LabelWrapper",
+  componentId: "sc-13y7p8y-0"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+
 function Calendar(props) {
   var focusOnRender = props.focusOnRender,
-      minWidth = props.minWidth,
+      width = props.width,
       selected = props.selected,
       viewMonth = props.viewMonth;
 
@@ -137,6 +146,8 @@ function Calendar(props) {
 
   var translate = (0, _useTranslations.default)();
 
+  var labelRef = _react.default.useRef(null);
+
   var firstRender = _react.default.useRef(true);
 
   var firstTabbableElementRef = _react.default.useRef(null);
@@ -147,6 +158,11 @@ function Calendar(props) {
   var isCurrentMonth = today.getMonth() + 1 === displayedMonth;
   var isCurrentYear = today.getFullYear() === displayedYear;
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTooltip = _useState2[0],
+      setShowTooltip = _useState2[1];
+
   _react.default.useEffect(function () {
     if (focusOnRender && firstRender) {
       firstRender.current = false; // @ts-ignore
@@ -155,13 +171,30 @@ function Calendar(props) {
     }
   }, [focusOnRender]);
 
+  _react.default.useLayoutEffect(function () {
+    var elem = labelRef.current;
+
+    if (elem && elem.clientWidth < elem.scrollWidth) {
+      setShowTooltip(true);
+    } else {
+      setShowTooltip(false);
+    }
+  }, [label]);
+
   return _react.default.createElement(_Grid.default.Container, {
     paddingY: 1
   }, _react.default.createElement(_Grid.default.Row, {
     alignment: "middle",
-    minWidth: minWidth,
+    minWidth: "300px",
+    width: width,
     paddingBottom: 1
-  }, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, null, label)), _react.default.createElement(_Flex.default, {
+  }, _react.default.createElement(_Grid.default.Column, {
+    maxWidth: "calc(100% - 112px)"
+  }, _react.default.createElement(LabelWrapper, {
+    ref: labelRef
+  }, label), showTooltip && _react.default.createElement(_Tooltip.default, {
+    target: labelRef
+  }, label)), _react.default.createElement(_Flex.default, {
     paddingRight: 1
   }, _react.default.createElement(_Button.default, {
     "aria-label": "",
@@ -191,7 +224,7 @@ function Calendar(props) {
   }, _react.default.createElement(_DateGrid.default, null, _react.default.createElement("table", null, _react.default.createElement("thead", null, _react.default.createElement("tr", null, (0, _range.default)(0, 7).map(function (dayOfWeekIndex) {
     return _react.default.createElement("th", {
       key: "".concat(label, "-day-of-week-header-idx-").concat(dayOfWeekIndex)
-    }, _react.default.createElement(_Typography.P, {
+    }, _react.default.createElement(LabelWrapper, {
       as: "span",
       size: "small",
       shade: 1
@@ -222,7 +255,7 @@ function Calendar(props) {
           disabled: isDisabled,
           "aria-disabled": isDisabled,
           type: "button"
-        }, _react.default.createElement(_Typography.P, {
+        }, _react.default.createElement(LabelWrapper, {
           as: "span",
           color: "inherit"
         }, day.date))));

package/lib/atoms/Calendar/index.test.js

@@ -72,9 +72,9 @@ describe('Calendar', function () {
     })),
         queryByText = _render2.queryByText;
 
-    expect(queryByText('Go to Today')).toBeInTheDocument();
+    expect(queryByText('Today')).toBeInTheDocument();
 
-    _react2.fireEvent.click(queryByText('Go to Today'));
+    _react2.fireEvent.click(queryByText('Today'));
 
     var today = new Date();
     expect(queryByText("".concat(months[today.getMonth()], " ").concat(today.getFullYear()))).toBeInTheDocument();
@@ -83,7 +83,7 @@ describe('Calendar', function () {
     var _render3 = render(_react.default.createElement(_.default, null)),
         queryByText = _render3.queryByText;
 
-    expect(queryByText('Go to Today').closest('button')).toHaveAttribute('disabled');
+    expect(queryByText('Today').closest('button')).toHaveAttribute('disabled');
   });
   it('renders the "go to today" button as enabled if its not in the current month', function () {
     var _render4 = render(_react.default.createElement(_.default, {
@@ -94,7 +94,7 @@ describe('Calendar', function () {
     })),
         queryByText = _render4.queryByText;
 
-    expect(queryByText('Go to Today').closest('button')).not.toHaveAttribute('disabled');
+    expect(queryByText('Today').closest('button')).not.toHaveAttribute('disabled');
   });
   it('renders the "go to today" button as enabled if its in the current month of a different year', function () {
     var today = new Date();
@@ -107,7 +107,7 @@ describe('Calendar', function () {
     })),
         queryByText = _render5.queryByText;
 
-    expect(queryByText('Go to Today').closest('button')).not.toHaveAttribute('disabled');
+    expect(queryByText('Today').closest('button')).not.toHaveAttribute('disabled');
   });
   it('renders a button to view the previous month', function () {
     var _rtlRender = (0, _react2.render)(_react.default.createElement(_ArrowLeft.default, null)),

package/lib/atoms/Calendar/types.d.ts

@@ -90,7 +90,7 @@ interface TBaseCalendarProps {
     focusOnRender?: boolean;
     onChange?: (date?: Date | TSelectedDates) => void;
     onClick?: MouseEventHandler;
-    minWidth?: string;
+    width?: string;
     viewMonth?: Date | TDisplayMonth;
     disabledDateRules?: TDisabledDateRule[];
 }

package/lib/atoms/Calendar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM9D,oBAAY,MAAM,GAAG,MAAM,CAAC;AAM5B,oBAAY,KAAK,GACb,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC;AAMP,oBAAY,iBAAiB,GACzB,iBAAiB,GACjB,mBAAmB,GACnB,YAAY,GACZ,SAAS,GACT,YAAY,CAAC;AAEjB,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,oBAAoB,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,kBAAkB,CAAC;CACzE;AAGD,oBAAY,WAAW,GAAG,CACxB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,CACpB,CAAC;AAGF,oBAAY,WAAW,GACnB,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,GACpD,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,GACjE,CACE,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,CACZ,CAAC;AAKN,oBAAY,YAAY,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7C,oBAAY,cAAc,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AAE5C,UAAU,oBAAoB;IAC5B,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,IAAI,EAAE,IAAI,GAAG,aAAa,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC;CAClC;AAED,MAAM,WAAW,4BAA6B,SAAQ,oBAAoB;IACxE,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB;AAED,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,oBAAY,gBAAgB,GACxB,4BAA4B,GAC5B,2BAA2B,CAAC;AAEhC,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,aAAa,CAAC;IAC5B,UAAU,EAAE,WAAW,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,aAAa,GAAG,cAAc,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC;CAClC;AAED,UAAU,+BAAgC,SAAQ,uBAAuB;IACvE,eAAe,CAAC,EAAE,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB;AAED,UAAU,8BAA+B,SAAQ,uBAAuB;IACtE,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,oBAAY,mBAAmB,GAC3B,+BAA+B,GAC/B,8BAA8B,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,YAAY,EAAE,aAAa,CAAC;IAC5B,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC;IACjC,oBAAoB,EAAE,CAAC,WAAW,EAAE,YAAY,GAAG,IAAI,KAAK,MAAM,IAAI,CAAC;IACvE,WAAW,EAAE,CAAC,WAAW,EAAE,YAAY,GAAG,IAAI,KAAK,MAAM,IAAI,CAAC;IAC9D,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,iBAAiB,CAAC;IACjC,cAAc,EAAE,iBAAiB,CAAC;CACnC;AAID,aAAK,sBAAsB,GAAG,CAAC,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AACjE,aAAK,uBAAuB,GAAG,CAAC,oBAAoB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACnE,aAAK,yBAAyB,GAAG,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAC5E,aAAK,mBAAmB,GAAG,CAAC,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AAC3D,aAAK,wBAAwB,GAAG,CAC9B,oBAAoB,CAAC,cAAc,EACnC,SAAS,CACV,CAAC;AAEF,oBAAY,iBAAiB,GACzB,sBAAsB,GACtB,uBAAuB,GACvB,yBAAyB,GACzB,mBAAmB,GACnB,wBAAwB,CAAC;AAE7B,UAAU,kBAAkB;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,aAAa,CAAC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CACzC;AAED,UAAU,0BAA2B,SAAQ,kBAAkB;IAC7D,eAAe,CAAC,EAAE,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB;AAED,UAAU,yBAA0B,SAAQ,kBAAkB;IAC5D,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,oBAAY,cAAc,GACtB,0BAA0B,GAC1B,yBAAyB,CAAC"}

package/lib/atoms/InputField/Containers.d.ts

@@ -598,7 +598,8 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     alignItems: string;
     justifyContent: string;
 } & {
-    hiddenLabel: boolean;
+    hiddenLabel?: boolean | undefined;
+    rightPlacement?: boolean | undefined;
 }, "alignItems" | "justifyContent">;
 export declare const InputInnerContainer: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {

package/lib/atoms/InputField/Containers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/Containers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUtC,OAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yCAa/B,CAAC;AAEF,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiCD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwD1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAazB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B/B,CAAC"}
+{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/Containers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC,OAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yCAa/B,CAAC;AAEF,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiCD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwD1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAuBzB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B/B,CAAC"}

package/lib/atoms/InputField/Containers.js

@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
 var _dynamicModifiers = require("../../utils/dynamicModifiers");
@@ -51,7 +53,7 @@ var IconContainer = (0, _styledComponents.default)(_Flex.default).attrs({
 }).withConfig({
   displayName: "Containers__IconContainer",
   componentId: "me30fz-2"
-})(["color:", ";margin:16px 0 6px 15px;", ""], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _styleModifiers.when)('hiddenLabel', (0, _styledComponents.css)(["margin:8px 0 8px 10px;"])));
+})(["color:", ";margin:16px 0 6px 15px;", " ", ""], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _styleModifiers.when)('rightPlacement', (0, _styledComponents.css)(["margin:0;align-items:center;margin-right:", ";margin-left:", ";"], (0, _rem.default)(_spacing.default.base * 0.8), (0, _rem.default)(_spacing.default.base * 0.8))), (0, _styleModifiers.when)('hiddenLabel', (0, _styledComponents.css)(["margin:8px 0 8px 10px;"])));
 exports.IconContainer = IconContainer;
 var InputInnerContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   flex: 1,

package/lib/atoms/InputField/HelpMessage.d.ts

@@ -4,7 +4,7 @@ export interface HelpMessageProps {
     helpMessage?: string;
     maxLength?: number;
     showCharacterCount?: boolean;
-    contentLength: number;
+    contentLength?: number;
 }
 declare function HelpMessage(props: HelpMessageProps): JSX.Element | null;
 declare namespace HelpMessage {

package/lib/atoms/InputField/HelpMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACvB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAwBhE;kBAxBQ,WAAW;;;;;;;;;;;;;;AAyCpB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6ChE;kBA7CQ,WAAW;;;;;;;;;;;;;;AA8DpB,eAAe,WAAW,CAAC"}

package/lib/atoms/InputField/HelpMessage.js

@@ -28,16 +28,32 @@ function HelpMessage(props) {
   var helpMessage = props.helpMessage,
       maxLength = props.maxLength,
       showCharacterCount = props.showCharacterCount,
-      contentLength = props.contentLength;
+      _props$contentLength = props.contentLength,
+      contentLength = _props$contentLength === void 0 ? 0 : _props$contentLength;
   var translate = (0, _useTranslations.default)();
-  var showCount = Boolean(maxLength && showCharacterCount); // You have {remaining} characters left ({max} max).
+  var showCount = Boolean(maxLength && showCharacterCount);
+  var countSurpassed = maxLength && contentLength > maxLength;
+
+  var countMessage = _react.default.useMemo(function () {
+    if (!showCount) {
+      return null;
+    }
+
+    if (countSurpassed) {
+      return translate(undefined, 'textArea.countMessageOver', {
+        surplus: _react.default.createElement(RemainingCount, null, contentLength - maxLength),
+        max: "".concat(maxLength)
+      });
+    }
+
+    return translate(undefined, 'textArea.countMessage', {
+      remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
+      max: "".concat(maxLength)
+    });
+  }, [contentLength, countSurpassed, maxLength, showCount, translate]);
 
-  var countMessage = showCount && translate(undefined, 'textArea.countMessage', {
-    remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
-    max: "".concat(maxLength)
-  });
   return helpMessage || showCount ? _react.default.createElement(_Message.default, {
-    intent: "help"
+    intent: countSurpassed ? 'warning' : 'help'
   }, helpMessage, helpMessage && showCount && _react.default.createElement("br", null), countMessage) : null;
 }
 

package/lib/atoms/InputField/index.d.ts

@@ -23,6 +23,7 @@ export interface BaseInputFieldProps {
     disabled?: boolean;
     helpMessage?: string;
     icon?: (props: IconProps) => JSX.Element;
+    secondaryElement?: JSX.Element;
     id?: string;
     inputContainerRef?: Ref<HTMLDivElement>;
     label: string;
@@ -41,10 +42,14 @@ export interface BaseInputFieldProps {
     showCharacterCount?: boolean;
     hideLabel?: boolean;
     style?: React.CSSProperties;
-    value: string;
+    value?: string;
     warningMessage?: string;
+    withWarningIntent?: boolean;
     isTextArea?: boolean;
     multiple?: boolean;
+    showContainerCount?: boolean;
+    containerMaxCount?: number;
+    containerCount?: number;
 }
 declare const InputFieldWithRef: RefForwardingComponent<Ref<any>, BaseInputFieldProps>;
 export default InputFieldWithRef;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuKD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"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"}

package/lib/atoms/InputField/index.js

@@ -33,6 +33,8 @@ var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
 
 var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
 
+var _styles = require("./styles");
+
 var _schema = _interopRequireDefault(require("./schema"));
 
 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; } }
@@ -66,6 +68,7 @@ function InputField(props, targetRef) {
       hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
       helpMessage = props.helpMessage,
       IconComponent = props.icon,
+      secondaryElement = props.secondaryElement,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
       label = props.label,
@@ -84,11 +87,15 @@ function InputField(props, targetRef) {
       style = props.style,
       value = props.value,
       warningMessage = props.warningMessage,
+      withWarningIntent = props.withWarningIntent,
       _props$isTextArea = props.isTextArea,
       isTextArea = _props$isTextArea === void 0 ? false : _props$isTextArea,
       _props$multiple = props.multiple,
       multiple = _props$multiple === void 0 ? false : _props$multiple,
-      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "isTextArea", "multiple"]);
+      showContainerCount = props.showContainerCount,
+      containerCount = props.containerCount,
+      containerMaxCount = props.containerMaxCount,
+      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "secondaryElement", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "withWarningIntent", "isTextArea", "multiple", "showContainerCount", "containerCount", "containerMaxCount"]);
 
   var fallbackTargetRef = (0, _react.useRef)(null);
   var finalTargetRef = targetRef || fallbackTargetRef;
@@ -148,10 +155,16 @@ function InputField(props, targetRef) {
     }
   };
 
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setContentLength(value.length || 0);
+    }
+  }, [value]);
   var targetId = (0, _useUniqueId.default)(id, 'input-field-target-');
   var labelId = labelIdProp || "".concat(targetId, "-label");
   var translate = (0, _useTranslations.default)();
   var requiredMessage = translate(requiredMessageProp, 'textField.requiredMessage');
+  var isCountOverflow = !!maxLength && contentLength > maxLength;
   return _react.default.createElement(_Containers.InputFieldContainer, {
     overflow: overflow,
     style: style
@@ -159,7 +172,7 @@ function InputField(props, targetRef) {
     cursor: cursor,
     hiddenLabel: hideLabel,
     disabled: disabled,
-    hasWarning: !!warningMessage,
+    hasWarning: !!warningMessage || withWarningIntent || isCountOverflow,
     isFocused: isFocused,
     readOnly: readOnly,
     ref: inputContainerRef,
@@ -186,7 +199,9 @@ function InputField(props, targetRef) {
     target: _react.default.createElement(_RequiredIcon.default, {
       "aria-label": requiredMessage
     })
-  }, requiredMessage))), children(_objectSpread({}, rest, {
+  }, requiredMessage), showContainerCount && containerMaxCount !== undefined && _react.default.createElement(_styles.ContentCounter, {
+    surpassed: (containerCount || 0) > containerMaxCount
+  }, "".concat(containerCount || 0, "/").concat(containerMaxCount)))), children(_objectSpread({}, rest, {
     'aria-labelledby': labelId,
     disabled: disabled,
     id: targetId,
@@ -199,7 +214,9 @@ function InputField(props, targetRef) {
     ref: finalTargetRef,
     required: required,
     value: value
-  })))), warningMessage && _react.default.createElement(_Message.default, {
+  }))), secondaryElement && _react.default.createElement(_Containers.IconContainer, {
+    rightPlacement: true
+  }, secondaryElement)), warningMessage && _react.default.createElement(_Message.default, {
     intent: "warning"
   }, warningMessage), _react.default.createElement(_HelpMessage.default, {
     contentLength: contentLength,

package/lib/atoms/InputField/index.test.js

@@ -87,5 +87,58 @@ describe('InputField', function () {
 
       expect(getByText(textFinder("You have 100 characters left (100 max)."))).toBeTruthy();
     });
+    it('updates content length when value changes', function () {
+      var label = 'label';
+      var initialValue = 'Initial text';
+
+      var _render2 = render(_react.default.createElement(_.default, {
+        label: label,
+        value: initialValue,
+        showCharacterCount: true,
+        maxLength: 100
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      })),
+          getByText = _render2.getByText,
+          rerender = _render2.rerender;
+
+      expect(getByText(textFinder("You have ".concat(100 - initialValue.length, " characters left (100 max).")))).toBeTruthy();
+      rerender(_react.default.createElement(_.default, {
+        label: label,
+        value: "".concat(initialValue, "abc"),
+        showCharacterCount: true,
+        maxLength: 100
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      }));
+      expect(getByText(textFinder("You have ".concat(100 - (initialValue.length + 3), " characters left (100 max).")))).toBeTruthy();
+    });
+    it('shows overflow message when values is larger than maxLength', function () {
+      var label = 'label';
+      var initialValue = 'Initial text';
+
+      var _render3 = render(_react.default.createElement(_.default, {
+        label: label,
+        value: initialValue,
+        showCharacterCount: true,
+        maxLength: 15
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      })),
+          getByText = _render3.getByText,
+          rerender = _render3.rerender;
+
+      expect(getByText(textFinder("You have ".concat(15 - initialValue.length, " characters left (15 max).")))).toBeTruthy();
+      var newValue = "".concat(initialValue, " with some additional text");
+      rerender(_react.default.createElement(_.default, {
+        label: label,
+        value: newValue,
+        showCharacterCount: true,
+        maxLength: 15
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      }));
+      expect(getByText(textFinder("You are ".concat(newValue.length - 15, " characters over the limit (15 max).")))).toBeTruthy();
+    });
   });
 });

package/lib/atoms/InputField/schema.js

@@ -20,9 +20,9 @@ schema.makePropTypes = function () {
     icon: _reactDesc.PropTypes.element.description('An icon to be rendered on the left side of the input.'),
     id: _reactDesc.PropTypes.string.description('A unique ID for the input.'),
     inputContainerRef: _reactDesc.PropTypes.oneOfType([// Either a function
-    _reactDesc.PropTypes.func, // Or the instance of a DOM native element (see the note about SSR)
+    _reactDesc.PropTypes.func, // Or the instance of a DOM native element (current will be an instance of HTMLDivElement)
     _reactDesc.PropTypes.shape({
-      current: _reactDesc.PropTypes.instanceOf(HTMLDivElement)
+      current: _reactDesc.PropTypes.any
     })]).description('A reference to the container component for the input field.'),
     label: _reactDesc.PropTypes.string.description('A label for the input field.').isRequired,
     labelId: _reactDesc.PropTypes.string.description("A unique ID for the input's label. This will be used in some ARIA attributes as well."),

package/lib/atoms/InputField/styles.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
+    surpassed?: boolean;
+}
+export declare const ContentCounter: import("styled-components").StyledComponent<"span", any, SpanProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/atoms/InputField/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AASvC,UAAU,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,eAAO,MAAM,cAAc,4EAS1B,CAAC"}

package/lib/atoms/InputField/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentCounter = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+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; } }
+
+// eslint-disable-next-line import/prefer-default-export
+var ContentCounter = _styledComponents.default.span.withConfig({
+  displayName: "styles__ContentCounter",
+  componentId: "sc-1mkcosa-0"
+})(["position:absolute;right:", ";", ""], (0, _rem.default)(_spacing.default.base), function (_ref) {
+  var surpassed = _ref.surpassed;
+  return surpassed && (0, _styledComponents.css)(["color:", ";"], (0, _toColorString.default)(_color.default.status.danger.medium));
+});
+
+exports.ContentCounter = ContentCounter;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Category: ({ borderRadius, label, items, indexOffset, showCheckbox, isDragEnabled, size, }: import("../types").Category) => JSX.Element;
+export default Category;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAUA,QAAA,MAAM,QAAQ,+HA4Eb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/atoms/OptionsList/Category/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+
+var _ConfigProvider = require("../../../providers/ConfigProvider");
+
+var _Option = _interopRequireDefault(require("../Option"));
+
+var _utils = require("../utils");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var Category = function Category(_ref) {
+  var borderRadius = _ref.borderRadius,
+      label = _ref.label,
+      items = _ref.items,
+      _ref$indexOffset = _ref.indexOffset,
+      indexOffset = _ref$indexOffset === void 0 ? 0 : _ref$indexOffset,
+      showCheckbox = _ref.showCheckbox,
+      isDragEnabled = _ref.isDragEnabled,
+      size = _ref.size;
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal; // Render a draggable item, using a portal if it's being dragged
+  // to avoid issues with parent containers having transform: *.
+  // See; https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
+
+
+  var renderDraggable = function renderDraggable(item, index) {
+    var id = (0, _utils.getId)(item);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: id,
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        providerRef: provided.innerRef,
+        isDragEnabled: isDragEnabled,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactBeautifulDnd.Draggable, {
+    key: "category-".concat(label),
+    draggableId: "category-".concat(label),
+    index: indexOffset,
+    isDragDisabled: true
+  }, function (provided) {
+    return _react.default.createElement(_styles.StyledCategory, _extends({
+      size: size,
+      ref: provided.innerRef
+    }, provided.draggableProps, provided.dragHandleProps, {
+      role: "option"
+    }), label);
+  }), items.map(function (subItem, index) {
+    return renderDraggable(subItem, indexOffset + index + 1);
+  }));
+};
+
+var _default = Category;
+exports.default = _default;

package/lib/atoms/OptionsList/Category/styles.d.ts

@@ -0,0 +1,5 @@
+import { StyledCategoryProps } from '../types';
+export declare const StyledCategory: import("styled-components").StyledComponent<"li", any, {
+    'aria-disabled': true;
+} & StyledCategoryProps, "aria-disabled">;
+//# sourceMappingURL=styles.d.ts.map

package/lib/atoms/OptionsList/Category/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;yCAY1B,CAAC"}