superdesk-ui-framework 3.1.3 → 3.1.5

package/dist/playgrounds/react-playgrounds/Multiedit.tsx

@@ -4,7 +4,7 @@ import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
 import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
-import { Spacer } from '../../../../app-typescript/components/Spacer';
+import { Spacer } from '@superdesk/common';
 
 interface IProps {
     children?: React.ReactNode;

package/dist/react/TreeSelect.tsx

@@ -252,7 +252,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     label='TreeSelect Label'
                                     info='Info Message'
                                     searchPlaceholder='Search...'
-                                    getBackgroundColor={(item: any) => item.bgColor} 
+                                    getBackgroundColor={(item: any) => item.bgColor}
                                     valueTemplate={(item, Wrapper) => {
                                         return (
                                             <Wrapper backgroundColor={item.bgColor}>
@@ -278,7 +278,65 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             label='TreeSelect Label'
                             info='Info Message'
                             searchPlaceholder='Search...'
-                            getBackgroundColor={(item: any) => item.bgColor} 
+                            getBackgroundColor={(item: any) => item.bgColor}
+                            valueTemplate={(item, Wrapper) => {
+                                return (
+                                    <Wrapper backgroundColor={item.bgColor}>
+                                        <span>{item.name}</span>
+                                    </Wrapper>
+                                );
+                            }}
+                            onChange={(e) => false}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>Sortable mode in TreeSelect.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    kind='synchronous'
+                                    value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
+                                    getOptions={() => options}
+                                    getId={(item) => item.name}
+                                    getLabel={(item) => item.name}
+                                    selectBranchWithChildren
+                                    allowMultiple
+                                    sortable
+                                    label='TreeSelect Label'
+                                    info='Info Message'
+                                    searchPlaceholder='Search...'
+                                    getBackgroundColor={(item: any) => item.bgColor}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}
+                                    onChange={(e) => false}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            kind='synchronous'
+                            value={[{name: 'Category1'}]}
+                            getOptions={() => options}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            selectBranchWithChildren
+                            allowMultiple
+                            sortable
+                            label='TreeSelect Label'
+                            info='Info Message'
+                            searchPlaceholder='Search...'
+                            getBackgroundColor={(item: any) => item.bgColor}
                             valueTemplate={(item, Wrapper) => {
                                 return (
                                     <Wrapper backgroundColor={item.bgColor}>
@@ -401,6 +459,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
                     <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
                     <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
+                    <Prop name='sortable' isRequired={false} type='boolean' default='/' description='Enable drag & drop functionality.'/>
                     <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
                     <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
                     <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
@@ -409,7 +468,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
                     <Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
                     <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
-                    <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
                     <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />

package/dist/sd_big-icons.svg

@@ -7,6 +7,16 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<<<<<<< HEAD
+<glyph unicode="&#xe600;" glyph-name="dashboard" d="M275.692 78.769h157.538v236.308h157.538v-236.308h157.538v315.077h157.538l-362.575 381.44c-7.632 7.626-18.172 12.342-29.814 12.342s-22.182-4.716-29.814-12.343v0l-365.489-381.44h157.538v-315.077z" />
+<glyph unicode="&#xe601;" glyph-name="view" d="M512 787.693c-310.863 0-512-354.462-512-354.462s197.474-354.462 512-354.462c292.588 0 512 354.462 512 354.462s-215.788 354.462-512 354.462zM512 196.923c-130.509 0-236.308 105.799-236.308 236.308s105.799 236.308 236.308 236.308c130.509 0 236.308-105.799 236.308-236.308v0c0-130.509-105.799-236.308-236.308-236.308v0zM630.154 433.231c0-65.255-52.899-118.154-118.154-118.154s-118.154 52.899-118.154 118.154c0 65.255 52.899 118.154 118.154 118.154s118.154-52.899 118.154-118.154z" />
+<glyph unicode="&#xe602;" glyph-name="tasks" d="M748.308 787.693v-78.769h-157.538v78.769h-157.538v-78.769h-157.538v78.769h-118.154c-0.297 0.008-0.647 0.013-0.998 0.013-20.504 0-37.192-16.339-37.755-36.707l-0.001-0.052q0-0.985 0-2.009v-672.571c-0.017-0.407-0.026-0.884-0.026-1.363 0-19.223 15.218-34.892 34.264-35.617l0.066-0.002h713.098c0.52-0.026 1.13-0.040 1.743-0.040 20.138 0 36.587 15.793 37.638 35.669l0.004 0.094q0 1.221 0 2.442v673.201c0.021 0.454 0.033 0.987 0.033 1.522 0 19.103-15.112 34.677-34.033 35.419l-0.067 0.002h-123.195zM787.692 157.539h-551.385v472.615h551.385v-472.615zM344.734 866.462h19.456c16.379 0 29.657-13.278 29.657-29.657v-58.841c0-16.379-13.278-29.657-29.657-29.657h-19.456c-16.379 0-29.657 13.278-29.657 29.657v58.841c0 16.379 13.278 29.657 29.657 29.657zM659.81 866.462h19.456c16.379 0 29.657-13.278 29.657-29.657v-58.841c0-16.379-13.278-29.657-29.657-29.657h-19.456c-16.379 0-29.657 13.278-29.657 29.657v58.841c0 16.379 13.278 29.657 29.657 29.657zM433.231 315.077l-77.942 90.585-40.212-41.118 118.154-128.236 275.692 274.747-39.385 40.33z" />
+<glyph unicode="&#xe603;" glyph-name="calendar" d="M787.692 787.693v-78.769h-157.538v78.769h-236.308v-78.769h-157.538v78.769h-118.784c-0.297 0.008-0.647 0.013-0.998 0.013-20.86 0-37.77-16.91-37.77-37.77 0-0.351 0.005-0.701 0.014-1.049l-0.001 0.051v-672.61c-0.015-0.388-0.024-0.843-0.024-1.3 0-19.624 15.859-35.544 35.461-35.643h791.403c0.577-0.032 1.253-0.050 1.933-0.050 20.816 0 37.691 16.875 37.691 37.691 0 0.184-0.001 0.367-0.004 0.55v-0.028 673.201c0.015 0.388 0.024 0.843 0.024 1.3 0 19.624-15.859 35.544-35.461 35.643h-122.101zM866.462 118.154h-708.923v472.615h708.923v-472.615zM319.37 748.308h-8.586c-19.372 0.022-35.069 15.72-35.092 35.090v47.972c0.067 19.395 15.805 35.092 35.21 35.092 0.083 0 0.166 0 0.249-0.001h8.612c19.206-0.2 34.698-15.816 34.698-35.051 0-0.014 0-0.029 0-0.043v0.002-48.010c-0.089-19.378-15.819-35.053-35.209-35.053-0.083 0-0.166 0-0.249 0.001h0.367zM713.216 748.308h-8.625c-19.355 0.045-35.030 15.734-35.052 35.090v47.972c0.067 19.395 15.805 35.092 35.21 35.092 0.083 0 0.166 0 0.249-0.001h8.612c19.206-0.2 34.698-15.816 34.698-35.051 0-0.014 0-0.029 0-0.043v0.002-48.010c-0.089-19.378-15.819-35.053-35.209-35.053-0.083 0-0.166 0-0.249 0.001h0.367zM236.308 512h196.923v-196.923h-196.923v196.923z" />
+<glyph unicode="&#xe604;" glyph-name="marked-star" d="M512 827.077l107.087-266.398 286.759-19.417-220.554-184.084 70.105-278.41-243.397 152.655-243.397-152.655 70.105 278.41-220.554 184.084 286.759 19.417 107.087 266.398z" />
+<glyph unicode="&#xe605;" glyph-name="archive" d="M787.692 748.308h-551.385v-275.692h551.385v275.692zM590.769 590.769h-157.538v39.385h157.538v-39.385zM787.692 433.231h-551.385v-275.692h551.385v275.692zM590.769 275.693h-157.538v39.385h157.538v-39.385zM866.462 866.462h-708.923c-21.752 0-39.385-17.633-39.385-39.385v0-748.308c0-21.752 17.633-39.385 39.385-39.385v0h708.923c21.752 0 39.385 17.633 39.385 39.385v0 748.308c0 21.752-17.633 39.385-39.385 39.385v0zM827.077 748.308v-630.154h-630.154v669.538h630.154v-39.385zM236.308 39.385h157.538v-39.385h-157.538v39.385zM630.154 39.385h157.538v-39.385h-157.538v39.385z" />
+<glyph unicode="&#xe606;" glyph-name="spike" d="M236.308 630.154v-512c0.134-43.449 35.32-78.635 78.756-78.769h393.859c43.449 0.134 78.635 35.32 78.769 78.756v512.013h-551.385zM393.846 118.154h-78.769v433.231h78.769v-433.231zM551.385 118.154h-78.769v433.231h78.769v-433.231zM708.923 118.154h-78.769v433.231h78.769v-433.231zM787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005z" />
+<glyph unicode="&#xe607;" glyph-name="unspike" d="M787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005zM293.022 630.154c-0.007 0-0.016 0-0.024 0-3.959 0-7.168-3.209-7.168-7.168 0-1.985 0.807-3.782 2.111-5.080v0l66.521-66.521h39.385v-39.385l78.769-78.769v118.154h78.769v-196.923l78.769-78.769v275.692h78.769v-354.462l64.866-64.866c1.474-1.467 3.506-2.373 5.75-2.373 4.503 0 8.153 3.65 8.153 8.153 0 0.004 0 0.007 0 0.011v-0.001 492.308h-494.671zM776.35 27.373l-591.518 591.478c-7.056 7.055-16.803 11.419-27.569 11.419s-20.513-4.364-27.569-11.419l-0.197-0.197c-7.055-7.056-11.419-16.803-11.419-27.569s4.364-20.513 11.419-27.569v0l106.811-106.654v-338.708c0.134-43.449 35.32-78.635 78.756-78.769h338.721l67.348-67.348c7.056-7.055 16.803-11.419 27.569-11.419s20.513 4.364 27.569 11.419l0.197 0.197c7.020 7.050 11.36 16.773 11.36 27.51 0 10.796-4.387 20.567-11.477 27.627l-0.001 0.001zM315.077 118.154v259.938l78.769-78.769v-181.169h-78.769zM551.385 118.154h-78.769v102.4l78.769-78.769v-23.631z" />
+=======
 <glyph unicode="&#xe600;" glyph-name="unspike" d="M787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005zM293.022 630.154c-0.007 0-0.016 0-0.024 0-3.959 0-7.168-3.209-7.168-7.168 0-1.985 0.807-3.782 2.111-5.080v0l66.521-66.521h39.385v-39.385l78.769-78.769v118.154h78.769v-196.923l78.769-78.769v275.692h78.769v-354.462l64.866-64.866c1.474-1.467 3.506-2.373 5.75-2.373 4.503 0 8.153 3.65 8.153 8.153 0 0.004 0 0.007 0 0.011v-0.001 492.308h-494.671zM776.35 27.373l-591.518 591.478c-7.056 7.055-16.803 11.419-27.569 11.419s-20.513-4.364-27.569-11.419l-0.197-0.197c-7.055-7.056-11.419-16.803-11.419-27.569s4.364-20.513 11.419-27.569v0l106.811-106.654v-338.708c0.134-43.449 35.32-78.635 78.756-78.769h338.721l67.348-67.348c7.056-7.055 16.803-11.419 27.569-11.419s20.513 4.364 27.569 11.419l0.197 0.197c7.020 7.050 11.36 16.773 11.36 27.51 0 10.796-4.387 20.567-11.477 27.627l-0.001 0.001zM315.077 118.154v259.938l78.769-78.769v-181.169h-78.769zM551.385 118.154h-78.769v102.4l78.769-78.769v-23.631z" />
 <glyph unicode="&#xe601;" glyph-name="dashboard" d="M275.692 78.769h157.538v236.308h157.538v-236.308h157.538v315.077h157.538l-362.575 381.44c-7.632 7.626-18.172 12.342-29.814 12.342s-22.182-4.716-29.814-12.343v0l-365.489-381.44h157.538v-315.077z" />
 <glyph unicode="&#xe602;" glyph-name="view" d="M512 787.693c-310.863 0-512-354.462-512-354.462s197.474-354.462 512-354.462c292.588 0 512 354.462 512 354.462s-215.788 354.462-512 354.462zM512 196.923c-130.509 0-236.308 105.799-236.308 236.308s105.799 236.308 236.308 236.308c130.509 0 236.308-105.799 236.308-236.308v0c0-130.509-105.799-236.308-236.308-236.308v0zM630.154 433.231c0-65.255-52.899-118.154-118.154-118.154s-118.154 52.899-118.154 118.154c0 65.255 52.899 118.154 118.154 118.154s118.154-52.899 118.154-118.154z" />
@@ -15,6 +25,7 @@
 <glyph unicode="&#xe605;" glyph-name="marked-star" d="M512 827.077l107.087-266.398 286.759-19.417-220.554-184.084 70.105-278.41-243.397 152.655-243.397-152.655 70.105 278.41-220.554 184.084 286.759 19.417 107.087 266.398z" />
 <glyph unicode="&#xe606;" glyph-name="archive" d="M787.692 748.308h-551.385v-275.692h551.385v275.692zM590.769 590.769h-157.538v39.385h157.538v-39.385zM787.692 433.231h-551.385v-275.692h551.385v275.692zM590.769 275.693h-157.538v39.385h157.538v-39.385zM866.462 866.462h-708.923c-21.752 0-39.385-17.633-39.385-39.385v0-748.308c0-21.752 17.633-39.385 39.385-39.385v0h708.923c21.752 0 39.385 17.633 39.385 39.385v0 748.308c0 21.752-17.633 39.385-39.385 39.385v0zM827.077 748.308v-630.154h-630.154v669.538h630.154v-39.385zM236.308 39.385h157.538v-39.385h-157.538v39.385zM630.154 39.385h157.538v-39.385h-157.538v39.385z" />
 <glyph unicode="&#xe607;" glyph-name="spike" d="M236.308 630.154v-512c0.134-43.449 35.32-78.635 78.756-78.769h393.859c43.449 0.134 78.635 35.32 78.769 78.756v512.013h-551.385zM393.846 118.154h-78.769v433.231h78.769v-433.231zM551.385 118.154h-78.769v433.231h78.769v-433.231zM708.923 118.154h-78.769v433.231h78.769v-433.231zM787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005z" />
+>>>>>>> a08c0d67188170f83c5a6467642c6a78cfde8f31
 <glyph unicode="&#xe608;" glyph-name="personal" d="M945.231-0h-196.923c-21.752 0-39.385 17.633-39.385 39.385v0 157.538c0 21.752 17.633 39.385 39.385 39.385v0h196.923c0.346 0.011 0.752 0.018 1.16 0.018 21.121 0 38.242-17.122 38.242-38.242 0-0.408-0.006-0.814-0.019-1.219l0.001 0.059v-157.538c0.043-0.668 0.067-1.448 0.067-2.233 0-20.555-16.663-37.218-37.218-37.218-0.786 0-1.566 0.024-2.339 0.072l0.106-0.005zM708.923 236.308v118.154s1.221 78.769 39.385 78.769c15.754 8.192 78.769 9.886 78.769 39.385 0 195.764-158.698 354.462-354.462 354.462s-354.462-158.698-354.462-354.462v0c-0.058-2.458-0.090-5.353-0.090-8.257 0-125.955 61.699-237.5 156.523-306.059l1.105-0.761v78.769c0.332 43.369 35.4 78.437 78.737 78.769h260.325c0.165 0.002 0.359 0.003 0.554 0.003 29.952 0 54.233-24.281 54.233-54.233 0-0.195-0.001-0.39-0.003-0.584v0.030zM477.538 354.462c-77.448 5.673-138.133 69.901-138.133 148.303 0 3.249 0.104 6.474 0.31 9.672l-0.022-0.436c-0.183 2.762-0.287 5.987-0.287 9.236 0 78.402 60.685 142.63 137.646 148.274l0.487 0.029c77.465-5.8 138.119-70.077 138.119-148.522 0-3.172-0.099-6.321-0.295-9.444l0.021 0.427c0.21-2.952 0.33-6.397 0.33-9.87 0-78.614-61.323-142.905-138.743-147.648l-0.417-0.020h0.985zM846.769 433.231c-53.327 0-98.462-41.236-98.462-118.154v-118.154h196.923v118.154c0 78.769-47.262 118.154-98.462 118.154zM905.846 236.308h-118.154v78.769c0 34.304 9.019 78.769 59.077 78.769 60.298 0 59.077-43.323 59.077-78.769v-78.769z" />
 <glyph unicode="&#xe609;" glyph-name="global-search" d="M78.769 787.693h866.462v-39.385h-866.462zM78.769 669.539h196.923v-39.385h-196.923zM748.308 669.539h196.923v-39.385h-196.923zM827.077 551.385h118.154v-39.385h-118.154zM78.769 551.385h118.154v-39.385h-118.154zM78.769 433.231h118.154v-39.385h-118.154zM866.462 433.231h78.769v-39.385h-78.769zM590.769 315.077h-157.538l-39.385 78.769h236.308l-39.385-78.769zM630.154 472.616h-236.308l39.385 78.769h157.538l39.385-78.769zM512 708.923c-152.261 0-275.692-123.432-275.692-275.692s123.432-275.692 275.692-275.692c152.261 0 275.692 123.432 275.692 275.692v0c0 152.261-123.432 275.692-275.692 275.692v0zM512 236.308c-108.758 0-196.923 88.165-196.923 196.923s88.165 196.923 196.923 196.923c108.758 0 196.923-88.165 196.923-196.923v0c0-108.758-88.165-196.923-196.923-196.923v0zM708.923 315.077l-78.769-78.769 236.308-236.308c0.094 0 0.205-0.001 0.316-0.001 43.218 0 78.275 34.946 78.453 78.123v0.647z" />
 <glyph unicode="&#xe60a;" glyph-name="analytics" d="M433.231 787.693h157.538v-708.923h-157.538v708.923zM196.923 393.846h157.538v-315.077h-157.538v315.077zM669.538 551.385h157.538v-472.615h-157.538v472.615z" />

package/dist/superdesk-ui.bundle.css

@@ -35996,7 +35996,7 @@ tags-input,
         background-color: var(--sd-colour-interactive--alpha-70); }
       tags-input .tags-input__tags .tags-input__tag-item:hover,
       .tags-input .tags-input__tags .tags-input__tag-item:hover {
-        cursor: pointer; }
+        cursor: default; }
       tags-input .tags-input__tags .tags-input__tag-item .tags-input__remove-button,
       .tags-input .tags-input__tags .tags-input__tag-item .tags-input__remove-button {
         height: 1.8rem;