@orfium/ictinus 4.63.0 → 4.65.0

package/dist/components/Icon/assets/iconSelector.js

@@ -256,6 +256,19 @@ CatalogIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 
+var ChannelIcon = function ChannelIcon(props) {
+  return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("path", {
+    d: "M16.667 6.667H3.334V5h13.333v1.667zm-1.667-5H5v1.666h10V1.667zM18.334 10v6.667c0 .916-.75 1.666-1.667 1.666H3.334c-.917 0-1.667-.75-1.667-1.666V10c0-.917.75-1.667 1.667-1.667h13.333c.917 0 1.667.75 1.667 1.667zm-5 3.333l-5-2.725v5.442l5-2.717z",
+    fill: "#0E0E17"
+  }));
+};
+
+ChannelIcon.defaultProps = {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
 var ChatBubble = function ChatBubble(props) {
   return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("path", {
     fillRule: "evenodd",
@@ -1188,6 +1201,37 @@ LegalFilesIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 
+var LicenceIcon = function LicenceIcon(props) {
+  return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.678 7.146v2.74l1.988 1.94-1.988 1.827v2.74h-2.69L10 18.333l-1.989-1.94h-2.69v-2.74l-1.988-1.826 1.988-1.941v-2.74h1.755v-5.48L10 3.38l2.924-1.712v5.48h1.754zM10 15a3.333 3.333 0 1 0 0-6.667A3.333 3.333 0 0 0 10 15z",
+    fill: "#000"
+  }));
+};
+
+LicenceIcon.defaultProps = {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var LicencedVideoIcon = function LicencedVideoIcon(props) {
+  return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("path", {
+    d: "M15 9.167c.283 0 .558.025.833.066v-5.9c0-.916-.75-1.666-1.666-1.666h-10c-.917 0-1.667.75-1.667 1.666v13.334c0 .916.75 1.666 1.667 1.666h6.05A5.83 5.83 0 0 1 15 9.166zm-9.167 0V3.333H10v5.834l-2.083-1.25-2.084 1.25z",
+    fill: "#0E0E17"
+  }), (0, _react2.jsx)("path", {
+    d: "M15 10.833A4.168 4.168 0 0 0 10.833 15c0 2.3 1.867 4.167 4.167 4.167S19.167 17.3 19.167 15 17.3 10.833 15 10.833zm-1.042 6.25v-4.166L17.292 15l-3.334 2.083z",
+    fill: "#0E0E17"
+  }));
+};
+
+LicencedVideoIcon.defaultProps = {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
 var LinkedIcon = function LinkedIcon(props) {
   return (0, _react2.jsx)("svg", props, (0, _react2.jsx)("path", {
     fillRule: "evenodd",
@@ -2310,6 +2354,7 @@ var iconSelector = {
   calendarEmpty: CalendarEmptyIcon,
   calendarFilled: CalendarFilledIcon,
   catalog: CatalogIcon,
+  channel: ChannelIcon,
   catalogOverview: CatalogOverviewIcon,
   catalogFiles: CatalogFilesIcon,
   chatBubble: ChatBubble,
@@ -2388,6 +2433,8 @@ var iconSelector = {
   issues: IssuesIcon,
   keyword: KeywordIcon,
   legalFiles: LegalFilesIcon,
+  licence: LicenceIcon,
+  licencedVideo: LicencedVideoIcon,
   linked: LinkedIcon,
   lock: LockIcon,
   mail: MailIcon,

package/dist/components/Icon/types.d.ts

@@ -1 +1 @@
-export declare type AcceptedIconNames = 'account' | 'actions' | 'add' | 'alert' | 'analytics' | 'analyticsVideos' | 'ancient' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowToLeft' | 'arrowToRight' | 'artist' | 'asset' | 'assetMatching' | 'auto' | 'broadcast' | 'calendarEmpty' | 'calendarFilled' | 'catalog' | 'catalogOverview' | 'catalogFiles' | 'chatBubble' | 'check' | 'checkedList' | 'checkmark' | 'chevronExtraSmallDown' | 'chevronExtraSmallLeft' | 'chevronExtraSmallRight' | 'chevronExtraSmallUp' | 'chevronLargeDown' | 'chevronLargeLeft' | 'chevronLargeRight' | 'chevronLargeUp' | 'chevronSmallDown' | 'chevronSmallLeft' | 'chevronSmallRight' | 'chevronSmallUp' | 'claimList' | 'clock' | 'close' | 'closeTag' | 'cmsProcess' | 'composition' | 'compositionV2' | 'confirmedMatches' | 'conflicts' | 'concert' | 'dashboard' | 'dataset' | 'delete' | 'delivery' | 'details' | 'digitalUse' | 'distribution' | 'dotsVertical' | 'download' | 'duplicate' | 'duplicate2' | 'earnings' | 'earnings2' | 'edit' | 'entities' | 'error' | 'expenses' | 'externalLink' | 'externalLinkV2' | 'fatArrowDown' | 'fatArrowLeft' | 'fatArrowRight' | 'fatArrowUp' | 'file' | 'financialChart' | 'generatedReports' | 'genericFile' | 'genericOrdering' | 'globalItem' | 'heartFill' | 'heartStroke' | 'help' | 'hourglass' | 'income' | 'infoFilled' | 'info' | 'issues' | 'keyword' | 'legalFiles' | 'linked' | 'lock' | 'mail' | 'manual' | 'menu' | 'microphone' | 'minus' | 'moreOptionsHorizontal' | 'moreOptionsVertical' | 'musicNote' | 'myEarnings' | 'notifications' | 'notifications2' | 'oneWay' | 'others' | 'ownershipValidation' | 'pageFirst' | 'pageLast' | 'percentage' | 'plus' | 'policies' | 'process' | 'processManagement' | 'publicPerformance' | 'publisher' | 'recording' | 'recordLabel' | 'recordLabelV2' | 'referenceFile' | 'relations' | 'restore' | 'result' | 'royaltyShares' | 'search' | 'searchMusic' | 'searchThunder' | 'settings' | 'sight' | 'sortAscending' | 'sortDescending' | 'stamp' | 'statements' | 'success' | 'television' | 'thunder' | 'ticTacToeArrow' | 'timeOut' | 'training' | 'triangleDown' | 'triangleLeft' | 'triangleRight' | 'triangleUp' | 'trophy' | 'TVCinema' | 'TVRadio' | 'update' | 'upload' | 'user' | 'userAvatar' | 'users' | 'users2' | 'videoConfirmation' | 'view' | 'warning' | 'works' | 'writer' | 'youtube' | 'refresh' | 'star' | 'pause' | 'resume' | 'restart' | 'entity' | 'playCount' | 'processedLogs' | 'proposed' | 'unpaired' | 'unpairedV2' | 'clockOutlined' | 'userCheck';
+export declare type AcceptedIconNames = 'account' | 'actions' | 'add' | 'alert' | 'analytics' | 'analyticsVideos' | 'ancient' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowToLeft' | 'arrowToRight' | 'artist' | 'asset' | 'assetMatching' | 'auto' | 'broadcast' | 'calendarEmpty' | 'calendarFilled' | 'catalog' | 'channel' | 'catalogOverview' | 'catalogFiles' | 'chatBubble' | 'check' | 'checkedList' | 'checkmark' | 'chevronExtraSmallDown' | 'chevronExtraSmallLeft' | 'chevronExtraSmallRight' | 'chevronExtraSmallUp' | 'chevronLargeDown' | 'chevronLargeLeft' | 'chevronLargeRight' | 'chevronLargeUp' | 'chevronSmallDown' | 'chevronSmallLeft' | 'chevronSmallRight' | 'chevronSmallUp' | 'claimList' | 'clock' | 'close' | 'closeTag' | 'cmsProcess' | 'composition' | 'compositionV2' | 'confirmedMatches' | 'conflicts' | 'concert' | 'dashboard' | 'dataset' | 'delete' | 'delivery' | 'details' | 'digitalUse' | 'distribution' | 'dotsVertical' | 'download' | 'duplicate' | 'duplicate2' | 'earnings' | 'earnings2' | 'edit' | 'entities' | 'error' | 'expenses' | 'externalLink' | 'externalLinkV2' | 'fatArrowDown' | 'fatArrowLeft' | 'fatArrowRight' | 'fatArrowUp' | 'file' | 'financialChart' | 'generatedReports' | 'genericFile' | 'genericOrdering' | 'globalItem' | 'heartFill' | 'heartStroke' | 'help' | 'hourglass' | 'income' | 'infoFilled' | 'info' | 'issues' | 'keyword' | 'legalFiles' | 'licence' | 'licencedVideo' | 'linked' | 'lock' | 'mail' | 'manual' | 'menu' | 'microphone' | 'minus' | 'moreOptionsHorizontal' | 'moreOptionsVertical' | 'musicNote' | 'myEarnings' | 'notifications' | 'notifications2' | 'oneWay' | 'others' | 'ownershipValidation' | 'pageFirst' | 'pageLast' | 'percentage' | 'plus' | 'policies' | 'process' | 'processManagement' | 'publicPerformance' | 'publisher' | 'recording' | 'recordLabel' | 'recordLabelV2' | 'referenceFile' | 'relations' | 'restore' | 'result' | 'royaltyShares' | 'search' | 'searchMusic' | 'searchThunder' | 'settings' | 'sight' | 'sortAscending' | 'sortDescending' | 'stamp' | 'statements' | 'success' | 'television' | 'thunder' | 'ticTacToeArrow' | 'timeOut' | 'training' | 'triangleDown' | 'triangleLeft' | 'triangleRight' | 'triangleUp' | 'trophy' | 'TVCinema' | 'TVRadio' | 'update' | 'upload' | 'user' | 'userAvatar' | 'users' | 'users2' | 'videoConfirmation' | 'view' | 'warning' | 'works' | 'writer' | 'youtube' | 'refresh' | 'star' | 'pause' | 'resume' | 'restart' | 'entity' | 'playCount' | 'processedLogs' | 'proposed' | 'unpaired' | 'unpairedV2' | 'clockOutlined' | 'userCheck';

package/dist/components/Select/Select.d.ts

@@ -12,6 +12,7 @@ export declare type SelectOption = {
     helperText?: string;
     tooltipInfo?: string;
     options?: SelectOption[];
+    isCreated?: boolean;
 } & SelectOptionValues;
 export declare type Props = {
     /** The function that is used to return the selected options */
@@ -48,6 +49,11 @@ export declare type Props = {
     /** The selected options in case of multiSelect */
     /** @TODO merge selectedOption with selectedOptions in v5 */
     selectedOptions?: SelectOption[];
+    /**
+     * If true, then in the case of a searched option that is not found in the Options list of MultiSelect,
+     * the user can create this option.
+     * */
+    creatable?: boolean;
 } & TextFieldProps;
 declare const Select: React.ForwardRefExoticComponent<{
     /** The function that is used to return the selected options */
@@ -84,6 +90,11 @@ declare const Select: React.ForwardRefExoticComponent<{
     /** The selected options in case of multiSelect */
     /** @TODO merge selectedOption with selectedOptions in v5 */
     selectedOptions?: SelectOption[] | undefined;
+    /**
+     * If true, then in the case of a searched option that is not found in the Options list of MultiSelect,
+     * the user can create this option.
+     * */
+    creatable?: boolean | undefined;
 } & {
     id?: string | undefined;
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;

package/dist/components/Select/Select.js

@@ -35,7 +35,7 @@ var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScree
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear", "onOptionDelete", "selectedOptions"];
+var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear", "onOptionDelete", "selectedOptions", "creatable"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,6 +88,8 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       onOptionDelete = _ref.onOptionDelete,
       _ref$selectedOptions = _ref.selectedOptions,
       selectedOptions = _ref$selectedOptions === void 0 ? [] : _ref$selectedOptions,
+      _ref$creatable = _ref.creatable,
+      creatable = _ref$creatable === void 0 ? false : _ref$creatable,
       restInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var theme = (0, _useTheme["default"])();
@@ -135,7 +137,14 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     if (multi) {
       handleMultiSelectOptionClick(option);
     } else {
-      setInputValue(option);
+      if (option.isCreated) {
+        setInputValue(_extends({}, option, {
+          label: option.value.toString()
+        }));
+      } else {
+        setInputValue(option);
+      }
+
       setOpen(false);
     }
 
@@ -180,27 +189,45 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 
   var filteredOptions = (0, _react.useMemo)(function () {
     var optionsToBeFiltered = multi ? availableMultiSelectOptions : options;
+    var finalOptions = [];
 
     if (isAsync) {
-      return optionsToBeFiltered;
-    }
-
-    return optionsToBeFiltered.filter(function (option) {
-      var _option$options;
+      finalOptions.push.apply(finalOptions, optionsToBeFiltered);
+    } else {
+      finalOptions.push.apply(finalOptions, optionsToBeFiltered.filter(function (option) {
+        var _option$options;
 
-      return !searchValue || option.label.toLowerCase().includes(searchValue.toLowerCase()) || !!((_option$options = option.options) != null && _option$options.find(function (option) {
-        return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        return !searchValue || option.label.toLowerCase().includes(searchValue.toLowerCase()) || !!((_option$options = option.options) != null && _option$options.find(function (option) {
+          return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        }));
+      }).map(function (option) {
+        var _option$options2;
+
+        return option.label.toLowerCase().includes(searchValue.toLowerCase()) ? option : _extends({}, option, {
+          options: (_option$options2 = option.options) == null ? void 0 : _option$options2.filter(function (option) {
+            return option.label.toLowerCase().includes(searchValue.toLowerCase());
+          })
+        });
       }));
-    }).map(function (option) {
-      var _option$options2;
+    }
 
-      return option.label.toLowerCase().includes(searchValue.toLowerCase()) ? option : _extends({}, option, {
-        options: (_option$options2 = option.options) == null ? void 0 : _option$options2.filter(function (option) {
-          return option.label.toLowerCase().includes(searchValue.toLowerCase());
-        })
-      });
-    });
-  }, [isAsync, multi, availableMultiSelectOptions, options, searchValue]);
+    if (creatable) {
+      /** Check if the searchValue has an exact result (so no need for "Create..." option) */
+      var hasDistinctResult = finalOptions.map(function (item) {
+        return item.label.toLowerCase();
+      }).includes(searchValue.toLowerCase());
+
+      if (!hasDistinctResult && searchValue.length > 0) {
+        finalOptions.push({
+          value: searchValue,
+          label: "Create \"" + searchValue + "\"",
+          isCreated: true
+        });
+      }
+    }
+
+    return finalOptions;
+  }, [multi, availableMultiSelectOptions, options, isAsync, creatable, searchValue]);
   var rightIconNameSelector = (0, _react.useMemo)(function () {
     if (isSearchable) {
       return searchValue || inputValue.value ? 'close' : 'search';
@@ -250,7 +277,13 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       combinedRefs == null ? void 0 : (_combinedRefs$current2 = combinedRefs.current) == null ? void 0 : _combinedRefs$current2.blur();
     }
   };
+  /**
+   * Boolean flag for the case where we have no options but create functionality - so
+   * we can hide the Select All option in that case
+   */
+
 
+  var hasNoOptionsAndIsCreatable = creatable && filteredOptions.length === 1 && filteredOptions[0].isCreated;
   return (0, _react2.jsx)(_ClickAwayListener["default"], {
     onClick: function onClick() {
       setOpen(false);
@@ -305,7 +338,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLoading: isLoading,
     isVirtualized: isVirtualized,
     searchTerm: highlightSearch ? searchValue : undefined,
-    hasSelectAllOption: multi
+    hasSelectAllOption: multi && !hasNoOptionsAndIsCreatable
   }))));
 });
 

package/dist/components/Select/hooks/useMultiselectUtils.js

@@ -59,7 +59,10 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
       setMultiSelectedOpts(multiSelectedOptions.filter(function (opt) {
         return opt.value !== (option == null ? void 0 : option.value);
       }));
-      setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [option]));
+
+      if (!option.isCreated) {
+        setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [option]));
+      }
 
       if (onOptionDelete) {
         onOptionDelete(option);
@@ -70,13 +73,18 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
         setMultiSelectedOpts(multiSelectedOptions.filter(function (opt) {
           return opt.value !== lastItem.value;
         }));
-        setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [lastItem]));
+
+        if (!lastItem.isCreated) {
+          setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [lastItem]));
+        }
       }
     }
   };
 
   var handleClearAllOptions = function handleClearAllOptions() {
-    setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, multiSelectedOptions));
+    setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, multiSelectedOptions.filter(function (item) {
+      return !item.isCreated;
+    })));
     setMultiSelectedOpts([]);
 
     if (onClear) {
@@ -101,6 +109,14 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
       setMultiSelectedOpts([].concat(multiSelectedOptions, selected));
       setAvailableMultiSelectOptions(remaining);
       setOpen(false);
+    } else if (option.isCreated) {
+      /** If the option is created internally */
+      var newOption = {
+        value: option.value,
+        label: option.value.toString(),
+        isCreated: true
+      };
+      setMultiSelectedOpts([].concat(multiSelectedOptions, [newOption]));
     } else {
       setMultiSelectedOpts([].concat(multiSelectedOptions, [option]));
       setAvailableMultiSelectOptions(availableMultiSelectOptions.filter(function (opt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.63.0",
+  "version": "4.65.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -120,14 +120,14 @@
     "react-router-dom": "^5.2.0"
   },
   "scripts": {
-    "prepare": "yarn build && husky install",
+    "prepare": "yarn build:lib && husky install",
     "start": "start-storybook -p 6006",
     "prebuild": "rimraf dist",
     "build:partial:style": "cross-env NODE_ENV=production BABEL_ENV=production babel src --config-file ./babelrc.build.json --extensions '.ts' --out-dir ./dist --plugins=babel-plugin-inline-import-data-uri",
     "build:partial:nostyle": "cross-env NODE_ENV=production BABEL_ENV=production babel src --config-file ./babelrc.build.json --extensions '.ts,.tsx' --out-dir ./dist --plugins=babel-plugin-inline-react-svg --ignore '**/*.style.ts'",
     "build:partial:types": "tsc --emitDeclarationOnly",
-    "build": "yarn build:partial:style && yarn build:partial:nostyle && yarn build:partial:types",
-    "build:storybook": "build-storybook",
+    "build:lib": "yarn build:partial:style && yarn build:partial:nostyle && yarn build:partial:types",
+    "build": "build-storybook -o build/",
     "lint": "eslint './src/**/*.{ts,tsx}'",
     "test": "jest",
     "test:watch": "jest --watch",