superdesk-ui-framework 3.0.38 → 3.0.40

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 566);
+/******/ 	return __webpack_require__(__webpack_require__.s = 569);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 566:
+/***/ 569:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28256,11 +28256,11 @@ __webpack_require__(21);
 
 __webpack_require__(42);
 
-__webpack_require__(567);
+__webpack_require__(570);
 
-__webpack_require__(569);
+__webpack_require__(572);
 
-__webpack_require__(571);
+__webpack_require__(574);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(7);
 
 /***/ }),
 
-/***/ 567:
+/***/ 570:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(568) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(571) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 568:
+/***/ 571:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 569:
+/***/ 572:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(570);
+__webpack_require__(573);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 570:
+/***/ 573:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 571:
+/***/ 574:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(572);
+__webpack_require__(575);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 572:
+/***/ 575:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/react/DragHandleDocs.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {DragHandle} from '../../../app-typescript';
+import * as Markup from '../../js/react';
+
+export default class DragHandleDocs extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Drag handle</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <DragHandle />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <DragHandle />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{'<DragHandle />'}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        );
+    }
+}

package/examples/pages/react/Index.tsx

@@ -55,7 +55,8 @@ import TextDoc from "./Text";
 import ContainerDoc from './Container';
 import DropZoneDoc from './DropZone';
 import CreateButtonDoc from './CreateButton';
-import TagInputDocs from './TagInputDocs'
+import TagInputDocs from './TagInputDocs';
+import DragHandleDocs from './DragHandleDocs';
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
@@ -122,6 +123,9 @@ const pages = {
             },
             'menu': {
                 name: 'Menu',
+            },
+            "drag-handle": {
+                name: 'Drag handle'
             }
         }
     },
@@ -366,6 +370,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/sub-navigation" component={SubNavDoc} />
                         <Route path="/react/dropdowns" component={DropdownDoc} />
                         <Route path="/react/toast" component={ToastsDoc} />
+                        <Route path="/react/drag-handle" component={DragHandleDocs} />
                         <Route path="/react/tag-input" component={TagInputDocs} />
                         <Route path="/react/empty-states" component={EmptyStateDoc} />
                         <Route path="/react/grid-list" component={GridListDoc} />

package/examples/pages/react/MultiSelect.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import { PropsList, Prop } from '../../../app-typescript';
 import { MultiSelect } from '../../../app-typescript';
+import { Label } from '../../../app-typescript';
 
 interface IColor {
     name: string;
@@ -115,7 +116,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                             return (
                                                 <div style={{display: 'flex', alignItems: 'center'}}>
                                                     <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
-                                                    <div>{option.name}</div>
+                                                    <span>{option.name}</span>
                                                 </div>
                                             );
                                         }

package/globals.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: string;
+    export default content;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.38",
+  "version": "3.0.40",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/DragHandle.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import '../../app/styles/_drag-handle.scss';
+export declare class DragHandle extends React.PureComponent {
+    render(): JSX.Element;
+}

package/react/components/DragHandle.js

@@ -0,0 +1,59 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandle = void 0;
+var React = __importStar(require("react"));
+require("../../app/styles/_drag-handle.scss");
+var dots_svg_1 = __importDefault(require("../../app/img/dots.svg"));
+var DragHandle = /** @class */ (function (_super) {
+    __extends(DragHandle, _super);
+    function DragHandle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DragHandle.prototype.render = function () {
+        return (React.createElement("div", { className: "drag-handle-wrapper" },
+            React.createElement("img", { src: dots_svg_1.default, className: "drag-handle" })));
+    };
+    return DragHandle;
+}(React.PureComponent));
+exports.DragHandle = DragHandle;

package/react/index.d.ts

@@ -89,5 +89,6 @@ export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
+export { DragHandle } from './components/DragHandle';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = void 0;
-exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = void 0;
+exports.DragHandle = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -217,3 +217,5 @@ Object.defineProperty(exports, "WithPopover", { enumerable: true, get: function
 var Spacer_1 = require("./components/Spacer");
 Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });
 Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return Spacer_1.SpacerBlock; } });
+var DragHandle_1 = require("./components/DragHandle");
+Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return DragHandle_1.DragHandle; } });

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "files": ["./app-typescript/index.ts"],
+    "files": ["./app-typescript/index.ts", "./globals.d.ts"],
     "compilerOptions": {
         "outDir": "./react",
         "module": "commonjs",