@jotforminc/dnd-builder 3.0.0-alpha.2 → 3.0.0

package/lib/esm/components/Settings/PageLayer/PageLayer.js

@@ -1,70 +1,140 @@
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'core-js/modules/es.array.map.js';
-import { useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { sortableContainer } from 'react-sortable-hoc';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { arrayMove } from '../../../utils/functions.js';
 import LayerItem from './LayerItem.js';
+import LayerDragOverlay from './LayerDragOverlay.js';
 import { elementIcons } from '../../../constants/elementIcons.js';
 import { useTranslatedTexts } from '../../../utils/hooks.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-var SortableContainer = sortableContainer(function (_ref) {
-  var children = _ref.children,
-      onScroll = _ref.onScroll;
-  return /*#__PURE__*/jsx("ul", {
-    className: "jfReportSelectOption-list withDnd forPageLayer",
-    onScroll: onScroll,
-    children: children
-  });
-});
-
-var PageLayer = function PageLayer(_ref2) {
-  var config = _ref2.config,
-      page = _ref2.item,
-      onItemChange = _ref2.onItemChange;
-  var onSortEnd = useCallback(function (_ref3) {
-    var newIndex = _ref3.newIndex,
-        oldIndex = _ref3.oldIndex;
-    var newItems = arrayMove(_toConsumableArray(page.items).reverse(), oldIndex, newIndex).map(function (i) {
-      return i.id;
-    });
-    onItemChange({
-      id: page.id
-    }, {
-      items: JSON.stringify(_toConsumableArray(newItems).reverse())
-    });
-  }, [page.id, onItemChange, page.items]);
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var PageLayer = function PageLayer(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$item = _ref.item,
+      page = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeId = _useState2[0],
+      setActiveId = _useState2[1];
+
+  var sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 0
+    }
+  }), useSensor(KeyboardSensor));
+  var handleDragStart = useCallback(function (event) {
+    setActiveId(event.active.id);
+  }, []);
+  var handleDragEnd = useCallback(function (event) {
+    var active = event.active,
+        over = event.over;
+    setActiveId(null);
+
+    if (over && active.id !== over.id) {
+      var reversedItems = _toConsumableArray(page.items).reverse();
+
+      var oldIndex = reversedItems.findIndex(function (item) {
+        return item.id === active.id;
+      });
+      var newIndex = reversedItems.findIndex(function (item) {
+        return item.id === over.id;
+      });
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        var newItems = arrayMove(reversedItems, oldIndex, newIndex).map(function (i) {
+          return i.id;
+        });
+        onItemChange({
+          id: page.id
+        }, {
+          items: JSON.stringify(_toConsumableArray(newItems).reverse())
+        });
+      }
+    }
+  }, [page.id, page.items, onItemChange]);
+  var handleDragCancel = useCallback(function () {
+    setActiveId(null);
+  }, []);
 
   var _useTranslatedTexts = useTranslatedTexts(),
       NO_ELEMENT_IN_PAGE = _useTranslatedTexts.NO_ELEMENT_IN_PAGE;
 
-  return page.items.length > 0 ? /*#__PURE__*/jsx(SortableContainer, {
-    helperClass: "forHelper withDnd",
-    lockAxis: "y",
-    onSortEnd: onSortEnd,
-    useDragHandle: true,
-    children: page.items && _toConsumableArray(page.items).reverse().map(function (item, index) {
-      var icon = elementIcons[item.itemType] ? elementIcons[item.itemType] : elementIcons.default;
-      return /*#__PURE__*/jsx(LayerItem, {
-        icon: icon,
-        index: index,
-        item: item,
-        onItemChange: config.updater,
-        optionKey: index,
-        setActiveElement: config.setActiveElement
-      }, item.id);
-    })
+  var items = useMemo(function () {
+    if (!page.items || page.items.length === 0) return [];
+    return _toConsumableArray(page.items).reverse().map(function (item) {
+      return item.id;
+    });
+  }, [page.items]);
+  var activeItemData = useMemo(function () {
+    if (!activeId || !page.items) return null;
+
+    var reversedItems = _toConsumableArray(page.items).reverse();
+
+    var activeItem = reversedItems.find(function (item) {
+      return item.id === activeId;
+    });
+    if (!activeItem) return null;
+    var icon = elementIcons[activeItem.itemType] ? elementIcons[activeItem.itemType] : elementIcons.default;
+    return {
+      icon: icon,
+      item: activeItem
+    };
+  }, [activeId, page.items]);
+  return page.items && page.items.length > 0 ? /*#__PURE__*/jsxs(DndContext, {
+    collisionDetection: closestCenter,
+    onDragCancel: handleDragCancel,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    sensors: sensors,
+    children: [/*#__PURE__*/jsx(SortableContext, {
+      items: items,
+      strategy: verticalListSortingStrategy,
+      children: /*#__PURE__*/jsx("ul", {
+        className: "jfReportSelectOption-list withDnd forPageLayer",
+        children: _toConsumableArray(page.items).reverse().map(function (item, index) {
+          var icon = elementIcons[item.itemType] ? elementIcons[item.itemType] : elementIcons.default;
+          return /*#__PURE__*/jsx(LayerItem, {
+            icon: icon,
+            id: item.id,
+            index: index,
+            item: item,
+            onItemChange: config.updater,
+            optionKey: index,
+            setActiveElement: config.setActiveElement
+          }, item.id);
+        })
+      })
+    }), /*#__PURE__*/jsx(LayerDragOverlay, {
+      activeItemData: activeItemData
+    })]
   }) : /*#__PURE__*/jsx("div", {
     className: "toolSection-notifier",
     children: NO_ELEMENT_IN_PAGE
@@ -83,11 +153,6 @@ PageLayer.propTypes = {
   }),
   onItemChange: PropTypes.func
 };
-PageLayer.defaultProps = {
-  config: {},
-  item: {},
-  onItemChange: function onItemChange() {}
-};
 
 export default PageLayer;
 //# sourceMappingURL=PageLayer.js.map

package/lib/esm/components/Settings/PageLayer/PageLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayer.js","sources":["../../../../../src/components/Settings/PageLayer/PageLayer.js"],"sourcesContent":["import { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { sortableContainer } from 'react-sortable-hoc';\nimport { arrayMove } from '../../../utils/functions';\nimport LayerItem from './LayerItem';\nimport { elementIcons } from '../../../constants/elementIcons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst SortableContainer = sortableContainer(({ children, onScroll }) => {\n  return (\n    <ul\n      className=\"jfReportSelectOption-list withDnd forPageLayer\"\n      onScroll={onScroll}\n    >\n      {children}\n    </ul>\n  );\n});\n\nconst PageLayer = ({\n  config,\n  item: page,\n  onItemChange,\n}) => {\n  const onSortEnd = useCallback(({ newIndex, oldIndex }) => {\n    const newItems = arrayMove([...page.items].reverse(), oldIndex, newIndex).map(i => i.id);\n    onItemChange({\n      id: page.id,\n    }, { items: JSON.stringify([...newItems].reverse()) });\n  }, [page.id, onItemChange, page.items]);\n  const { NO_ELEMENT_IN_PAGE } = useTranslatedTexts();\n  return (\n    page.items.length > 0 ? (\n      <SortableContainer\n        helperClass=\"forHelper withDnd\"\n        lockAxis=\"y\"\n        onSortEnd={onSortEnd}\n        useDragHandle\n      >\n        {page.items && [...page.items].reverse().map((item, index) => {\n          const icon = elementIcons[item.itemType]\n            ? elementIcons[item.itemType]\n            : elementIcons.default;\n          return (\n            <LayerItem\n              key={item.id}\n              icon={icon}\n              index={index}\n              item={item}\n              onItemChange={config.updater}\n              optionKey={index}\n              setActiveElement={config.setActiveElement}\n            />\n          );\n        })}\n      </SortableContainer>\n    ) : (\n      <div\n        className=\"toolSection-notifier\"\n      >\n        {NO_ELEMENT_IN_PAGE}\n      </div>\n    )\n  );\n};\n\nPageLayer.propTypes = {\n  config: PropTypes.shape({\n    setActiveElement: PropTypes.func,\n    updater: PropTypes.func,\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    isVisible: PropTypes.bool,\n    itemType: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nPageLayer.defaultProps = {\n  config: {},\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default PageLayer;\n"],"names":["SortableContainer","sortableContainer","children","onScroll","_jsx","PageLayer","config","page","item","onItemChange","onSortEnd","useCallback","newIndex","oldIndex","newItems","arrayMove","items","reverse","map","i","id","JSON","stringify","useTranslatedTexts","NO_ELEMENT_IN_PAGE","length","index","icon","elementIcons","itemType","default","updater","setActiveElement","propTypes","PropTypes","shape","func","string","isVisible","bool","defaultProps"],"mappings":"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"}
+{"version":3,"file":"PageLayer.js","sources":["../../../../../src/components/Settings/PageLayer/PageLayer.js"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { arrayMove } from '../../../utils/functions';\nimport LayerItem from './LayerItem';\nimport LayerDragOverlay from './LayerDragOverlay';\nimport { elementIcons } from '../../../constants/elementIcons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst PageLayer = ({\n  config = {},\n  item: page = {},\n  onItemChange = () => {},\n}) => {\n  const [activeId, setActiveId] = useState(null);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 0,\n      },\n    }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragStart = useCallback(event => {\n    setActiveId(event.active.id);\n  }, []);\n\n  const handleDragEnd = useCallback(event => {\n    const { active, over } = event;\n    setActiveId(null);\n\n    if (over && active.id !== over.id) {\n      const reversedItems = [...page.items].reverse();\n      const oldIndex = reversedItems.findIndex(item => item.id === active.id);\n      const newIndex = reversedItems.findIndex(item => item.id === over.id);\n\n      if (oldIndex !== -1 && newIndex !== -1) {\n        const newItems = arrayMove(reversedItems, oldIndex, newIndex).map(i => i.id);\n        onItemChange({\n          id: page.id,\n        }, { items: JSON.stringify([...newItems].reverse()) });\n      }\n    }\n  }, [page.id, page.items, onItemChange]);\n\n  const handleDragCancel = useCallback(() => {\n    setActiveId(null);\n  }, []);\n\n  const { NO_ELEMENT_IN_PAGE } = useTranslatedTexts();\n\n  const items = useMemo(() => {\n    if (!page.items || page.items.length === 0) return [];\n    return [...page.items].reverse().map(item => item.id);\n  }, [page.items]);\n\n  const activeItemData = useMemo(() => {\n    if (!activeId || !page.items) return null;\n\n    const reversedItems = [...page.items].reverse();\n    const activeItem = reversedItems.find(item => item.id === activeId);\n    if (!activeItem) return null;\n\n    const icon = elementIcons[activeItem.itemType]\n      ? elementIcons[activeItem.itemType]\n      : elementIcons.default;\n\n    return {\n      icon,\n      item: activeItem,\n    };\n  }, [activeId, page.items]);\n\n  return (\n    page.items && page.items.length > 0 ? (\n      <DndContext\n        collisionDetection={closestCenter}\n        onDragCancel={handleDragCancel}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        sensors={sensors}\n      >\n        <SortableContext\n          items={items}\n          strategy={verticalListSortingStrategy}\n        >\n          <ul className=\"jfReportSelectOption-list withDnd forPageLayer\">\n            {[...page.items].reverse().map((item, index) => {\n              const icon = elementIcons[item.itemType]\n                ? elementIcons[item.itemType]\n                : elementIcons.default;\n              return (\n                <LayerItem\n                  key={item.id}\n                  icon={icon}\n                  id={item.id}\n                  index={index}\n                  item={item}\n                  onItemChange={config.updater}\n                  optionKey={index}\n                  setActiveElement={config.setActiveElement}\n                />\n              );\n            })}\n          </ul>\n        </SortableContext>\n        <LayerDragOverlay activeItemData={activeItemData} />\n      </DndContext>\n    ) : (\n      <div className=\"toolSection-notifier\">\n        {NO_ELEMENT_IN_PAGE}\n      </div>\n    )\n  );\n};\n\nPageLayer.propTypes = {\n  config: PropTypes.shape({\n    setActiveElement: PropTypes.func,\n    updater: PropTypes.func,\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    isVisible: PropTypes.bool,\n    itemType: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default PageLayer;\n"],"names":["PageLayer","config","item","page","onItemChange","useState","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","useCallback","event","active","id","handleDragEnd","over","reversedItems","items","reverse","oldIndex","findIndex","newIndex","newItems","arrayMove","map","i","JSON","stringify","handleDragCancel","useTranslatedTexts","NO_ELEMENT_IN_PAGE","useMemo","length","activeItemData","activeItem","find","icon","elementIcons","itemType","default","_jsxs","closestCenter","_jsx","verticalListSortingStrategy","index","updater","setActiveElement","propTypes","PropTypes","shape","func","string","isVisible","bool"],"mappings":"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"}

package/lib/esm/components/Settings/SegmentControl.js

@@ -23,10 +23,14 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var SegmentControl = function SegmentControl(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange,
-      value = _ref.value;
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? [] : _ref$config,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value;
   var multipleSelect = config.multipleSelect,
       options = config.options,
       optionsDisplay = config.optionsDisplay;
@@ -91,12 +95,6 @@ SegmentControl.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-SegmentControl.defaultProps = {
-  config: [],
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var SegmentControl$1 = /*#__PURE__*/memo(SegmentControl);
 
 export default SegmentControl$1;

package/lib/esm/components/Settings/SegmentControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.js","sources":["../../../../src/components/Settings/SegmentControl.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { safeJSONParse } from '../../utils/functions';\n\nconst SegmentControl = ({\n  config, item, onItemChange, value,\n}) => {\n  const { multipleSelect, options, optionsDisplay } = config;\n  const exactValue = !multipleSelect ? value : safeJSONParse(value, []);\n  const onClick = type => {\n    return () => {\n      let newValue = type;\n      if (multipleSelect) {\n        newValue = [...exactValue];\n        if (exactValue.includes(type)) {\n          newValue = newValue.filter(v => v !== type);\n        } else {\n          newValue.push(type);\n        }\n        newValue = JSON.stringify(newValue);\n      }\n      if (newValue !== value) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue },\n        );\n      }\n    };\n  };\n  return (\n    <div className=\"toolSection-list d-flex dir-row forSegments\">\n      {options.map(option => {\n        const key = option.value ? option.value : option;\n        return (\n          <button\n            key={key}\n            className={classNames(\n              'toolSection-listItem',\n              'd-flex',\n              'j-center',\n              {\n                isSelected: !multipleSelect\n                  ? exactValue === key\n                  : exactValue && exactValue.includes(key),\n              },\n            )}\n            onClick={onClick(key)}\n            type=\"button\"\n          >\n            {optionsDisplay ? optionsDisplay.map(display => (\n              <Fragment key={display}>\n                {option[display]}\n              </Fragment>\n            )) : option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nSegmentControl.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    multipleSelect: PropTypes.bool,\n    options: PropTypes.arrayOf(PropTypes.any),\n    optionsDisplay: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nSegmentControl.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(SegmentControl);\n"],"names":["SegmentControl","config","item","onItemChange","value","multipleSelect","options","optionsDisplay","exactValue","safeJSONParse","onClick","type","newValue","includes","filter","v","push","JSON","stringify","id","key","_jsx","map","option","classNames","isSelected","display","label","propTypes","PropTypes","shape","string","bool","arrayOf","any","func","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"SegmentControl.js","sources":["../../../../src/components/Settings/SegmentControl.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { safeJSONParse } from '../../utils/functions';\n\nconst SegmentControl = ({\n  config = [],\n  item = {},\n  onItemChange = () => {},\n  value = '',\n}) => {\n  const { multipleSelect, options, optionsDisplay } = config;\n  const exactValue = !multipleSelect ? value : safeJSONParse(value, []);\n  const onClick = type => {\n    return () => {\n      let newValue = type;\n      if (multipleSelect) {\n        newValue = [...exactValue];\n        if (exactValue.includes(type)) {\n          newValue = newValue.filter(v => v !== type);\n        } else {\n          newValue.push(type);\n        }\n        newValue = JSON.stringify(newValue);\n      }\n      if (newValue !== value) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue },\n        );\n      }\n    };\n  };\n  return (\n    <div className=\"toolSection-list d-flex dir-row forSegments\">\n      {options.map(option => {\n        const key = option.value ? option.value : option;\n        return (\n          <button\n            key={key}\n            className={classNames(\n              'toolSection-listItem',\n              'd-flex',\n              'j-center',\n              {\n                isSelected: !multipleSelect\n                  ? exactValue === key\n                  : exactValue && exactValue.includes(key),\n              },\n            )}\n            onClick={onClick(key)}\n            type=\"button\"\n          >\n            {optionsDisplay ? optionsDisplay.map(display => (\n              <Fragment key={display}>\n                {option[display]}\n              </Fragment>\n            )) : option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nSegmentControl.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    multipleSelect: PropTypes.bool,\n    options: PropTypes.arrayOf(PropTypes.any),\n    optionsDisplay: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nexport default memo(SegmentControl);\n"],"names":["SegmentControl","config","item","onItemChange","value","multipleSelect","options","optionsDisplay","exactValue","safeJSONParse","onClick","type","newValue","includes","filter","v","push","JSON","stringify","id","key","_jsx","map","option","classNames","isSelected","display","label","propTypes","PropTypes","shape","string","bool","arrayOf","any","func","memo"],"mappings":"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"}

package/lib/esm/components/Settings/SelectBox.js

@@ -10,10 +10,14 @@ import SvgShapes from '../../assets/svg/toolbox/shapes.svg.js';
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var SelectBox = function SelectBox(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange,
-      value = _ref.value;
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? [] : _ref$config,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value;
 
   var handleSelection = function handleSelection(newValue) {
     return function () {
@@ -63,12 +67,6 @@ SelectBox.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-SelectBox.defaultProps = {
-  config: [],
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var SelectBox$1 = /*#__PURE__*/memo(SelectBox);
 
 export default SelectBox$1;

package/lib/esm/components/Settings/SelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBox.js","sources":["../../../../src/components/Settings/SelectBox.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport * as icons from '../../utils/icons';\n\nconst SelectBox = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const handleSelection = newValue => () => {\n    if (value !== newValue) {\n      onItemChange(\n        { id: item.id },\n        { [config.key]: newValue },\n      );\n    }\n  };\n  const { options } = config;\n\n  return (\n    <div className=\"toolSection-list withIcons bigList forShapes d-flex dir-row f-wrap\">\n      {options.map(option => {\n        const OptionIcon = option.icon\n          ? option.icon\n          : icons[option.name] || icons.shapes;\n\n        return (\n          <button\n            key={option.name}\n            className={classNames(\n              'toolSection-listItem',\n              'd-flex a-center',\n              'f-width',\n              { isSelected: option.name === value },\n            )}\n            onClick={handleSelection(option.name)}\n            type=\"button\"\n          >\n            <span className=\"d-flex j-center a-center\">\n              <OptionIcon className=\"jfReportSVG\" />\n            </span>\n            <span className=\"toolSection-listItemName d-flex j-between a-center\">\n              <span>{option.title}</span>\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nSelectBox.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nSelectBox.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(SelectBox);\n"],"names":["SelectBox","config","item","onItemChange","value","handleSelection","newValue","id","key","options","_jsx","map","option","OptionIcon","icon","icons","name","_jsxs","classNames","isSelected","title","propTypes","PropTypes","shape","string","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAKZ;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,QAAQ;AAAA,WAAI,YAAM;AACxC,UAAIF,KAAK,KAAKE,QAAd,EAAwB;AACtBH,QAAAA,YAAY,CACV;AAAEI,UAAAA,EAAE,EAAEL,IAAI,CAACK;AAAX,SADU,sBAEPN,MAAM,CAACO,GAFA,EAEMF,QAFN,EAAZ;AAID;AACF,KAP+B;AAAA,GAAhC;;AAQA,MAAQG,OAAR,GAAoBR,MAApB,CAAQQ,OAAR;AAEA,sBACEC;AAAK,IAAA,SAAS,EAAC,oEAAf;AAAA,cACGD,OAAO,CAACE,GAAR,CAAY,UAAAC,MAAM,EAAI;AACrB,UAAMC,UAAU,GAAGD,MAAM,CAACE,IAAP,GACfF,MAAM,CAACE,IADQ,GAEfC,KAAK,CAACH,MAAM,CAACI,IAAR,CAAL,IAAsBD,SAF1B;AAIA,0BACEE;AAEE,QAAA,SAAS,EAAEC,UAAU,CACnB,sBADmB,EAEnB,iBAFmB,EAGnB,SAHmB,EAInB;AAAEC,UAAAA,UAAU,EAAEP,MAAM,CAACI,IAAP,KAAgBZ;AAA9B,SAJmB,CAFvB;AAQE,QAAA,OAAO,EAAEC,eAAe,CAACO,MAAM,CAACI,IAAR,CAR1B;AASE,QAAA,IAAI,EAAC,QATP;AAAA,gCAWEN;AAAM,UAAA,SAAS,EAAC,0BAAhB;AAAA,iCACEA,IAAC,UAAD;AAAY,YAAA,SAAS,EAAC;AAAtB;AADF,UAXF,eAcEA;AAAM,UAAA,SAAS,EAAC,oDAAhB;AAAA,iCACEA;AAAA,sBAAOE,MAAM,CAACQ;AAAd;AADF,UAdF;AAAA,SACOR,MAAM,CAACI,IADd,CADF;AAoBD,KAzBA;AADH,IADF;AA8BD,CA9CD;;AAgDAhB,SAAS,CAACqB,SAAV,GAAsB;AACpBpB,EAAAA,MAAM,EAAEqB,SAAS,CAACC,KAAV,CAAgB;AACtBf,IAAAA,GAAG,EAAEc,SAAS,CAACE,MADO;AAEtBf,IAAAA,OAAO,EAAEa,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACI,GAA5B;AAFa,GAAhB,CADY;AAKpBxB,EAAAA,IAAI,EAAEoB,SAAS,CAACC,KAAV,CAAgB;AACpBhB,IAAAA,EAAE,EAAEe,SAAS,CAACE;AADM,GAAhB,CALc;AAQpBrB,EAAAA,YAAY,EAAEmB,SAAS,CAACK,IARJ;AASpBvB,EAAAA,KAAK,EAAEkB,SAAS,CAACE;AATG,CAAtB;AAYAxB,SAAS,CAAC4B,YAAV,GAAyB;AACvB3B,EAAAA,MAAM,EAAE,EADe;AAEvBC,EAAAA,IAAI,EAAE,EAFiB;AAGvBC,EAAAA,YAAY,EAAE,wBAAM,EAHG;AAIvBC,EAAAA,KAAK,EAAE;AAJgB,CAAzB;AAOA,+BAAeyB,IAAI,CAAC7B,SAAD,CAAnB;;;;"}
+{"version":3,"file":"SelectBox.js","sources":["../../../../src/components/Settings/SelectBox.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport * as icons from '../../utils/icons';\n\nconst SelectBox = ({\n  config = [],\n  item = {},\n  onItemChange = () => {},\n  value = '',\n}) => {\n  const handleSelection = newValue => () => {\n    if (value !== newValue) {\n      onItemChange(\n        { id: item.id },\n        { [config.key]: newValue },\n      );\n    }\n  };\n  const { options } = config;\n\n  return (\n    <div className=\"toolSection-list withIcons bigList forShapes d-flex dir-row f-wrap\">\n      {options.map(option => {\n        const OptionIcon = option.icon\n          ? option.icon\n          : icons[option.name] || icons.shapes;\n\n        return (\n          <button\n            key={option.name}\n            className={classNames(\n              'toolSection-listItem',\n              'd-flex a-center',\n              'f-width',\n              { isSelected: option.name === value },\n            )}\n            onClick={handleSelection(option.name)}\n            type=\"button\"\n          >\n            <span className=\"d-flex j-center a-center\">\n              <OptionIcon className=\"jfReportSVG\" />\n            </span>\n            <span className=\"toolSection-listItemName d-flex j-between a-center\">\n              <span>{option.title}</span>\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nSelectBox.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nexport default memo(SelectBox);\n"],"names":["SelectBox","config","item","onItemChange","value","handleSelection","newValue","id","key","options","_jsx","map","option","OptionIcon","icon","icons","name","_jsxs","classNames","isSelected","title","propTypes","PropTypes","shape","string","arrayOf","any","func","memo"],"mappings":";;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAKZ;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,EAIL;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,EAGH;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,YAAM,EAEjB;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,EACJ;;AACJ,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,QAAQ;AAAA,WAAI,YAAM;AACxC,UAAIF,KAAK,KAAKE,QAAd,EAAwB;AACtBH,QAAAA,YAAY,CACV;AAAEI,UAAAA,EAAE,EAAEL,IAAI,CAACK;AAAX,SADU,sBAEPN,MAAM,CAACO,GAFA,EAEMF,QAFN,EAAZ;AAID;AACF,KAP+B;AAAA,GAAhC;;AAQA,MAAQG,OAAR,GAAoBR,MAApB,CAAQQ,OAAR;AAEA,sBACEC;AAAK,IAAA,SAAS,EAAC,oEAAf;AAAA,cACGD,OAAO,CAACE,GAAR,CAAY,UAAAC,MAAM,EAAI;AACrB,UAAMC,UAAU,GAAGD,MAAM,CAACE,IAAP,GACfF,MAAM,CAACE,IADQ,GAEfC,KAAK,CAACH,MAAM,CAACI,IAAR,CAAL,IAAsBD,SAF1B;AAIA,0BACEE;AAEE,QAAA,SAAS,EAAEC,UAAU,CACnB,sBADmB,EAEnB,iBAFmB,EAGnB,SAHmB,EAInB;AAAEC,UAAAA,UAAU,EAAEP,MAAM,CAACI,IAAP,KAAgBZ;AAA9B,SAJmB,CAFvB;AAQE,QAAA,OAAO,EAAEC,eAAe,CAACO,MAAM,CAACI,IAAR,CAR1B;AASE,QAAA,IAAI,EAAC,QATP;AAAA,gCAWEN;AAAM,UAAA,SAAS,EAAC,0BAAhB;AAAA,iCACEA,IAAC,UAAD;AAAY,YAAA,SAAS,EAAC;AAAtB;AADF,UAXF,eAcEA;AAAM,UAAA,SAAS,EAAC,oDAAhB;AAAA,iCACEA;AAAA,sBAAOE,MAAM,CAACQ;AAAd;AADF,UAdF;AAAA,SACOR,MAAM,CAACI,IADd,CADF;AAoBD,KAzBA;AADH,IADF;AA8BD,CA9CD;;AAgDAhB,SAAS,CAACqB,SAAV,GAAsB;AACpBpB,EAAAA,MAAM,EAAEqB,SAAS,CAACC,KAAV,CAAgB;AACtBf,IAAAA,GAAG,EAAEc,SAAS,CAACE,MADO;AAEtBf,IAAAA,OAAO,EAAEa,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACI,GAA5B;AAFa,GAAhB,CADY;AAKpBxB,EAAAA,IAAI,EAAEoB,SAAS,CAACC,KAAV,CAAgB;AACpBhB,IAAAA,EAAE,EAAEe,SAAS,CAACE;AADM,GAAhB,CALc;AAQpBrB,EAAAA,YAAY,EAAEmB,SAAS,CAACK,IARJ;AASpBvB,EAAAA,KAAK,EAAEkB,SAAS,CAACE;AATG,CAAtB;AAYA,+BAAeI,IAAI,CAAC5B,SAAD,CAAnB;;;;"}

package/lib/esm/components/Settings/SettingsItemRenderer.js

@@ -10,8 +10,15 @@ var getItemComponent = function getItemComponent(settingType) {
 };
 
 var SettingsItemRenderer = function SettingsItemRenderer(_ref) {
-  var children = _ref.children,
-      setting = _ref.setting;
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? function () {} : _ref$children,
+      _ref$setting = _ref.setting,
+      setting = _ref$setting === void 0 ? {
+    label: '',
+    static: false,
+    type: '',
+    wrapperClass: ''
+  } : _ref$setting;
   var label = setting.label,
       wrapperClass = setting.wrapperClass;
   var component = setting.component ? setting.component : getItemComponent(setting.type);
@@ -40,15 +47,6 @@ SettingsItemRenderer.propTypes = {
     wrapperClass: PropTypes.string
   })
 };
-SettingsItemRenderer.defaultProps = {
-  children: function children() {},
-  setting: {
-    label: '',
-    static: false,
-    type: '',
-    wrapperClass: ''
-  }
-};
 
 var areEqual = function areEqual(prevProps, nextProps) {
   if (!isEqual(prevProps.settingValue, nextProps.settingValue)) return false;

package/lib/esm/components/Settings/SettingsItemRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsItemRenderer.js","sources":["../../../../src/components/Settings/SettingsItemRenderer.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport classNames from 'classnames';\nimport isEqual from 'lodash.isequal';\nimport PropTypes from 'prop-types';\nimport Settings from './index';\n\nconst getItemComponent = settingType => {\n  return Settings[settingType] || Fragment;\n};\n\nconst SettingsItemRenderer = ({\n  children,\n  setting,\n}) => {\n  const { label, wrapperClass } = setting;\n  const component = setting.component ? setting.component : getItemComponent(setting.type);\n\n  if (setting.static) { return children(component); }\n\n  const cx = classNames('toolItem', 'toolSection', wrapperClass);\n  return (\n    <div className={cx}>\n      <div className=\"toolSection-title t-medium js-ItemLabel\">\n        {label}\n      </div>\n      {children(component)}\n    </div>\n  );\n};\n\nSettingsItemRenderer.propTypes = {\n  children: PropTypes.any,\n  setting: PropTypes.shape({\n    component: PropTypes.oneOfType([\n      PropTypes.func,\n      PropTypes.shape({}),\n    ]),\n    label: PropTypes.string,\n    static: PropTypes.bool,\n    type: PropTypes.string,\n    wrapperClass: PropTypes.string,\n  }),\n};\n\nSettingsItemRenderer.defaultProps = {\n  children: () => {},\n  setting: {\n    label: '',\n    static: false,\n    type: '',\n    wrapperClass: '',\n  },\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  if (!isEqual(prevProps.settingValue, nextProps.settingValue)) return false;\n  return true;\n};\n\nexport default memo(SettingsItemRenderer, areEqual);\n"],"names":["getItemComponent","settingType","Settings","Fragment","SettingsItemRenderer","children","setting","label","wrapperClass","component","type","static","cx","classNames","_jsxs","_jsx","propTypes","PropTypes","any","shape","oneOfType","func","string","bool","defaultProps","areEqual","prevProps","nextProps","isEqual","settingValue","memo"],"mappings":";;;;;;;AAMA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAAAC,WAAW,EAAI;AACtC,SAAOC,QAAQ,CAACD,WAAD,CAAR,IAAyBE,QAAhC;AACD,CAFD;;AAIA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAGvB;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAQC,KAAR,GAAgCD,OAAhC,CAAQC,KAAR;AAAA,MAAeC,YAAf,GAAgCF,OAAhC,CAAeE,YAAf;AACA,MAAMC,SAAS,GAAGH,OAAO,CAACG,SAAR,GAAoBH,OAAO,CAACG,SAA5B,GAAwCT,gBAAgB,CAACM,OAAO,CAACI,IAAT,CAA1E;;AAEA,MAAIJ,OAAO,CAACK,MAAZ,EAAoB;AAAE,WAAON,QAAQ,CAACI,SAAD,CAAf;AAA6B;;AAEnD,MAAMG,EAAE,GAAGC,UAAU,CAAC,UAAD,EAAa,aAAb,EAA4BL,YAA5B,CAArB;AACA,sBACEM;AAAK,IAAA,SAAS,EAAEF,EAAhB;AAAA,4BACEG;AAAK,MAAA,SAAS,EAAC,yCAAf;AAAA,gBACGR;AADH,MADF,EAIGF,QAAQ,CAACI,SAAD,CAJX;AAAA,IADF;AAQD,CAlBD;;AAoBAL,oBAAoB,CAACY,SAArB,GAAiC;AAC/BX,EAAAA,QAAQ,EAAEY,SAAS,CAACC,GADW;AAE/BZ,EAAAA,OAAO,EAAEW,SAAS,CAACE,KAAV,CAAgB;AACvBV,IAAAA,SAAS,EAAEQ,SAAS,CAACG,SAAV,CAAoB,CAC7BH,SAAS,CAACI,IADmB,EAE7BJ,SAAS,CAACE,KAAV,CAAgB,EAAhB,CAF6B,CAApB,CADY;AAKvBZ,IAAAA,KAAK,EAAEU,SAAS,CAACK,MALM;AAMvBX,IAAAA,MAAM,EAAEM,SAAS,CAACM,IANK;AAOvBb,IAAAA,IAAI,EAAEO,SAAS,CAACK,MAPO;AAQvBd,IAAAA,YAAY,EAAES,SAAS,CAACK;AARD,GAAhB;AAFsB,CAAjC;AAcAlB,oBAAoB,CAACoB,YAArB,GAAoC;AAClCnB,EAAAA,QAAQ,EAAE,oBAAM,EADkB;AAElCC,EAAAA,OAAO,EAAE;AACPC,IAAAA,KAAK,EAAE,EADA;AAEPI,IAAAA,MAAM,EAAE,KAFD;AAGPD,IAAAA,IAAI,EAAE,EAHC;AAIPF,IAAAA,YAAY,EAAE;AAJP;AAFyB,CAApC;;AAUA,IAAMiB,QAAQ,GAAG,SAAXA,QAAW,CAACC,SAAD,EAAYC,SAAZ,EAA0B;AACzC,MAAI,CAACC,OAAO,CAACF,SAAS,CAACG,YAAX,EAAyBF,SAAS,CAACE,YAAnC,CAAZ,EAA8D,OAAO,KAAP;AAC9D,SAAO,IAAP;AACD,CAHD;;AAKA,0CAAeC,IAAI,CAAC1B,oBAAD,EAAuBqB,QAAvB,CAAnB;;;;"}
+{"version":3,"file":"SettingsItemRenderer.js","sources":["../../../../src/components/Settings/SettingsItemRenderer.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport classNames from 'classnames';\nimport isEqual from 'lodash.isequal';\nimport PropTypes from 'prop-types';\nimport Settings from './index';\n\nconst getItemComponent = settingType => {\n  return Settings[settingType] || Fragment;\n};\n\nconst SettingsItemRenderer = ({\n  children = () => {},\n  setting = {\n    label: '',\n    static: false,\n    type: '',\n    wrapperClass: '',\n  },\n}) => {\n  const { label, wrapperClass } = setting;\n  const component = setting.component ? setting.component : getItemComponent(setting.type);\n\n  if (setting.static) { return children(component); }\n\n  const cx = classNames('toolItem', 'toolSection', wrapperClass);\n  return (\n    <div className={cx}>\n      <div className=\"toolSection-title t-medium js-ItemLabel\">\n        {label}\n      </div>\n      {children(component)}\n    </div>\n  );\n};\n\nSettingsItemRenderer.propTypes = {\n  children: PropTypes.any,\n  setting: PropTypes.shape({\n    component: PropTypes.oneOfType([\n      PropTypes.func,\n      PropTypes.shape({}),\n    ]),\n    label: PropTypes.string,\n    static: PropTypes.bool,\n    type: PropTypes.string,\n    wrapperClass: PropTypes.string,\n  }),\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  if (!isEqual(prevProps.settingValue, nextProps.settingValue)) return false;\n  return true;\n};\n\nexport default memo(SettingsItemRenderer, areEqual);\n"],"names":["getItemComponent","settingType","Settings","Fragment","SettingsItemRenderer","children","setting","label","static","type","wrapperClass","component","cx","classNames","_jsxs","_jsx","propTypes","PropTypes","any","shape","oneOfType","func","string","bool","areEqual","prevProps","nextProps","isEqual","settingValue","memo"],"mappings":";;;;;;;AAMA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAAAC,WAAW,EAAI;AACtC,SAAOC,QAAQ,CAACD,WAAD,CAAR,IAAyBE,QAAhC;AACD,CAFD;;AAIA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAQvB;AAAA,2BAPJC,QAOI;AAAA,MAPJA,QAOI,8BAPO,YAAM,EAOb;AAAA,0BANJC,OAMI;AAAA,MANJA,OAMI,6BANM;AACRC,IAAAA,KAAK,EAAE,EADC;AAERC,IAAAA,MAAM,EAAE,KAFA;AAGRC,IAAAA,IAAI,EAAE,EAHE;AAIRC,IAAAA,YAAY,EAAE;AAJN,GAMN;AACJ,MAAQH,KAAR,GAAgCD,OAAhC,CAAQC,KAAR;AAAA,MAAeG,YAAf,GAAgCJ,OAAhC,CAAeI,YAAf;AACA,MAAMC,SAAS,GAAGL,OAAO,CAACK,SAAR,GAAoBL,OAAO,CAACK,SAA5B,GAAwCX,gBAAgB,CAACM,OAAO,CAACG,IAAT,CAA1E;;AAEA,MAAIH,OAAO,CAACE,MAAZ,EAAoB;AAAE,WAAOH,QAAQ,CAACM,SAAD,CAAf;AAA6B;;AAEnD,MAAMC,EAAE,GAAGC,UAAU,CAAC,UAAD,EAAa,aAAb,EAA4BH,YAA5B,CAArB;AACA,sBACEI;AAAK,IAAA,SAAS,EAAEF,EAAhB;AAAA,4BACEG;AAAK,MAAA,SAAS,EAAC,yCAAf;AAAA,gBACGR;AADH,MADF,EAIGF,QAAQ,CAACM,SAAD,CAJX;AAAA,IADF;AAQD,CAvBD;;AAyBAP,oBAAoB,CAACY,SAArB,GAAiC;AAC/BX,EAAAA,QAAQ,EAAEY,SAAS,CAACC,GADW;AAE/BZ,EAAAA,OAAO,EAAEW,SAAS,CAACE,KAAV,CAAgB;AACvBR,IAAAA,SAAS,EAAEM,SAAS,CAACG,SAAV,CAAoB,CAC7BH,SAAS,CAACI,IADmB,EAE7BJ,SAAS,CAACE,KAAV,CAAgB,EAAhB,CAF6B,CAApB,CADY;AAKvBZ,IAAAA,KAAK,EAAEU,SAAS,CAACK,MALM;AAMvBd,IAAAA,MAAM,EAAES,SAAS,CAACM,IANK;AAOvBd,IAAAA,IAAI,EAAEQ,SAAS,CAACK,MAPO;AAQvBZ,IAAAA,YAAY,EAAEO,SAAS,CAACK;AARD,GAAhB;AAFsB,CAAjC;;AAcA,IAAME,QAAQ,GAAG,SAAXA,QAAW,CAACC,SAAD,EAAYC,SAAZ,EAA0B;AACzC,MAAI,CAACC,OAAO,CAACF,SAAS,CAACG,YAAX,EAAyBF,SAAS,CAACE,YAAnC,CAAZ,EAA8D,OAAO,KAAP;AAC9D,SAAO,IAAP;AACD,CAHD;;AAKA,0CAAeC,IAAI,CAACzB,oBAAD,EAAuBoB,QAAvB,CAAnB;;;;"}

package/lib/esm/components/Settings/SizeSettings.js

@@ -26,8 +26,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var SizeSettings = function SizeSettings(_ref) {
-  var item = _ref.item,
-      onItemChange = _ref.onItemChange;
+  var _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange;
   var initialAspect = useRef();
 
   var _useState = useState({
@@ -245,10 +247,6 @@ SizeSettings.propTypes = {
   }),
   onItemChange: PropTypes.func
 };
-SizeSettings.defaultProps = {
-  item: {},
-  onItemChange: function onItemChange() {}
-};
 
 export default SizeSettings;
 //# sourceMappingURL=SizeSettings.js.map

package/lib/esm/components/Settings/SizeSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"SizeSettings.js","sources":["../../../../src/components/Settings/SizeSettings.js"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { getImageSizes, roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\nimport * as icons from '../../utils/icons';\n\nconst SizeSettings = ({ item, onItemChange }) => {\n  const initialAspect = useRef();\n  const [stackSize, setStackSize] = useState({ height: item.height, width: item.width });\n  const [aspectLock, setAspectLock] = useState(true);\n  const imageRefForMeta = useRef(null);\n  const { HEIGHT, ORIGINAL_SIZE, WIDTH } = useTranslatedTexts();\n\n  useEffect(() => {\n    setStackSize({ height: item.height, width: item.width });\n  }, [item.height, item.width]);\n\n  useEffect(() => {\n    if (aspectLock) {\n      initialAspect.current = stackSize.width / stackSize.height;\n    }\n  }, [aspectLock]);\n\n  const sizeSetter = ({ height, width }) => {\n    const sizes = { height: Number(height), width: Number(width) };\n    setStackSize(sizes);\n    onItemChange({ id: item.id }, sizes);\n  };\n\n  const sizeSetterHelper = ({ height, width }) => {\n    let exactWidth = Number(width);\n    let exactHeight = Number(height);\n    if (aspectLock) {\n      if (item.width !== stackSize.width) {\n        exactHeight = stackSize.width / initialAspect.current;\n      } else {\n        exactWidth = stackSize.height * initialAspect.current;\n      }\n    }\n\n    sizeSetter({ height: Math.max(exactHeight, 5), width: Math.max(exactWidth, 5) });\n  };\n\n  const handleBlur = () => {\n    sizeSetterHelper(stackSize);\n  };\n\n  const handleChangeSize = (type = 'width', prevValue) => e => {\n    if (e.stopPropagation) e.stopPropagation();\n\n    const { value } = e.target;\n    if (Number(value) !== Number(prevValue)) {\n      setStackSize({ ...stackSize, [type]: Number(value) || 0 });\n    }\n  };\n\n  const setOriginalSizes = () => {\n    // For Shapes\n    if (item.shapeType) {\n      return sizeSetter({\n        height: 200,\n        width: 200,\n      });\n    }\n    // For Images\n    if (!imageRefForMeta.current) {\n      getImageSizes(item.url, (imageWidth, imageHeight) => {\n        imageRefForMeta.current = {\n          imageHeight,\n          imageWidth,\n        };\n        sizeSetter({\n          height: imageHeight,\n          width: imageWidth,\n        });\n      });\n    } else {\n      const { imageHeight, imageWidth } = imageRefForMeta.current;\n      sizeSetter({\n        height: imageHeight,\n        width: imageWidth,\n      });\n    }\n  };\n\n  const handleKeyDown = (type, currValue) => event => {\n    event.stopPropagation();\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      const ref = event.shiftKey ? 10 : 1;\n      const diff = event.key === 'ArrowUp' ? ref : -ref;\n      handleChangeSize(type, currValue)({\n        target: {\n          value: Number(currValue) + diff,\n        },\n      });\n    } else if (event.key === 'Tab') {\n      event.preventDefault();\n      const input = type === 'width' ? 'height-input' : 'width-input';\n      document.getElementById(input).focus();\n      document.getElementById(input).select();\n    } else if (event.key === 'Enter') {\n      sizeSetterHelper(stackSize);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('width', stackSize.width)}\n              onKeyDown={handleKeyDown('width', stackSize.width)}\n              pattern=\"[0-9]*\"\n              tabIndex={0}\n              value={roundForDecimalPart(stackSize.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('height', stackSize.height)}\n              onKeyDown={handleKeyDown('height', stackSize.height)}\n              pattern=\"[0-9]*\"\n              value={roundForDecimalPart(stackSize.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n      {(item.url || item.shapeType)\n        && (\n          <div className=\"toolSection-wrapper\">\n            <button\n              className=\"jfReportButton forOptions forDimension f-width\"\n              onClick={setOriginalSizes}\n              type=\"button\"\n            >\n              {ORIGINAL_SIZE}\n            </button>\n          </div>\n        )}\n    </>\n  );\n};\n\nSizeSettings.propTypes = {\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nSizeSettings.defaultProps = {\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default SizeSettings;\n"],"names":["SizeSettings","item","onItemChange","initialAspect","useRef","useState","height","width","stackSize","setStackSize","aspectLock","setAspectLock","imageRefForMeta","useTranslatedTexts","HEIGHT","ORIGINAL_SIZE","WIDTH","useEffect","current","sizeSetter","sizes","Number","id","sizeSetterHelper","exactWidth","exactHeight","Math","max","handleBlur","handleChangeSize","type","prevValue","e","stopPropagation","value","target","setOriginalSizes","shapeType","getImageSizes","url","imageWidth","imageHeight","handleKeyDown","currValue","event","key","preventDefault","ref","shiftKey","diff","input","document","getElementById","focus","select","_jsxs","_jsx","roundForDecimalPart","icons.lock","icons.unlock","propTypes","PropTypes","shape","number","string","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"SizeSettings.js","sources":["../../../../src/components/Settings/SizeSettings.js"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { getImageSizes, roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\nimport * as icons from '../../utils/icons';\n\nconst SizeSettings = ({\n  item = {},\n  onItemChange = () => {},\n}) => {\n  const initialAspect = useRef();\n  const [stackSize, setStackSize] = useState({ height: item.height, width: item.width });\n  const [aspectLock, setAspectLock] = useState(true);\n  const imageRefForMeta = useRef(null);\n  const { HEIGHT, ORIGINAL_SIZE, WIDTH } = useTranslatedTexts();\n\n  useEffect(() => {\n    setStackSize({ height: item.height, width: item.width });\n  }, [item.height, item.width]);\n\n  useEffect(() => {\n    if (aspectLock) {\n      initialAspect.current = stackSize.width / stackSize.height;\n    }\n  }, [aspectLock]);\n\n  const sizeSetter = ({ height, width }) => {\n    const sizes = { height: Number(height), width: Number(width) };\n    setStackSize(sizes);\n    onItemChange({ id: item.id }, sizes);\n  };\n\n  const sizeSetterHelper = ({ height, width }) => {\n    let exactWidth = Number(width);\n    let exactHeight = Number(height);\n    if (aspectLock) {\n      if (item.width !== stackSize.width) {\n        exactHeight = stackSize.width / initialAspect.current;\n      } else {\n        exactWidth = stackSize.height * initialAspect.current;\n      }\n    }\n\n    sizeSetter({ height: Math.max(exactHeight, 5), width: Math.max(exactWidth, 5) });\n  };\n\n  const handleBlur = () => {\n    sizeSetterHelper(stackSize);\n  };\n\n  const handleChangeSize = (type = 'width', prevValue) => e => {\n    if (e.stopPropagation) e.stopPropagation();\n\n    const { value } = e.target;\n    if (Number(value) !== Number(prevValue)) {\n      setStackSize({ ...stackSize, [type]: Number(value) || 0 });\n    }\n  };\n\n  const setOriginalSizes = () => {\n    // For Shapes\n    if (item.shapeType) {\n      return sizeSetter({\n        height: 200,\n        width: 200,\n      });\n    }\n    // For Images\n    if (!imageRefForMeta.current) {\n      getImageSizes(item.url, (imageWidth, imageHeight) => {\n        imageRefForMeta.current = {\n          imageHeight,\n          imageWidth,\n        };\n        sizeSetter({\n          height: imageHeight,\n          width: imageWidth,\n        });\n      });\n    } else {\n      const { imageHeight, imageWidth } = imageRefForMeta.current;\n      sizeSetter({\n        height: imageHeight,\n        width: imageWidth,\n      });\n    }\n  };\n\n  const handleKeyDown = (type, currValue) => event => {\n    event.stopPropagation();\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      const ref = event.shiftKey ? 10 : 1;\n      const diff = event.key === 'ArrowUp' ? ref : -ref;\n      handleChangeSize(type, currValue)({\n        target: {\n          value: Number(currValue) + diff,\n        },\n      });\n    } else if (event.key === 'Tab') {\n      event.preventDefault();\n      const input = type === 'width' ? 'height-input' : 'width-input';\n      document.getElementById(input).focus();\n      document.getElementById(input).select();\n    } else if (event.key === 'Enter') {\n      sizeSetterHelper(stackSize);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('width', stackSize.width)}\n              onKeyDown={handleKeyDown('width', stackSize.width)}\n              pattern=\"[0-9]*\"\n              tabIndex={0}\n              value={roundForDecimalPart(stackSize.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('height', stackSize.height)}\n              onKeyDown={handleKeyDown('height', stackSize.height)}\n              pattern=\"[0-9]*\"\n              value={roundForDecimalPart(stackSize.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n      {(item.url || item.shapeType)\n        && (\n          <div className=\"toolSection-wrapper\">\n            <button\n              className=\"jfReportButton forOptions forDimension f-width\"\n              onClick={setOriginalSizes}\n              type=\"button\"\n            >\n              {ORIGINAL_SIZE}\n            </button>\n          </div>\n        )}\n    </>\n  );\n};\n\nSizeSettings.propTypes = {\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default SizeSettings;\n"],"names":["SizeSettings","item","onItemChange","initialAspect","useRef","useState","height","width","stackSize","setStackSize","aspectLock","setAspectLock","imageRefForMeta","useTranslatedTexts","HEIGHT","ORIGINAL_SIZE","WIDTH","useEffect","current","sizeSetter","sizes","Number","id","sizeSetterHelper","exactWidth","exactHeight","Math","max","handleBlur","handleChangeSize","type","prevValue","e","stopPropagation","value","target","setOriginalSizes","shapeType","getImageSizes","url","imageWidth","imageHeight","handleKeyDown","currValue","event","key","preventDefault","ref","shiftKey","diff","input","document","getElementById","focus","select","_jsxs","_jsx","roundForDecimalPart","icons.lock","icons.unlock","propTypes","PropTypes","shape","number","string","func"],"mappings":"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"}

package/lib/esm/components/Settings/Slider.js

@@ -7,10 +7,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var Slider = function Slider(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange,
-      value = _ref.value;
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value;
   var range = config.range,
       simple = config.simple;
   var refValue = simple ? 1 : 100;
@@ -89,12 +93,6 @@ Slider.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Slider.defaultProps = {
-  config: {},
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var Slider$1 = /*#__PURE__*/memo(Slider);
 
 export default Slider$1;

package/lib/esm/components/Settings/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/Settings/Slider.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Slider = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const { range, simple } = config;\n  const refValue = simple ? 1 : 100;\n  const onChange = e => {\n    const newValue = e.target.value;\n    if (newValue !== value) {\n      if (newValue >= range[0] && newValue <= range[1]) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue / refValue },\n        );\n      }\n    }\n  };\n\n  const onKeyDown = event => {\n    event.stopPropagation();\n    if (event.shiftKey) {\n      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n        event.preventDefault();\n        const diff = event.key === 'ArrowUp' ? 10 : -10;\n        onChange({\n          target: {\n            value: Number(value) + diff,\n          },\n        });\n      }\n    }\n  };\n\n  return (\n    <div className=\"rangeSliderWrapper d-flex a-center\">\n      <div className=\"rangeSlider\">\n        <input\n          className=\"rangeSlider-bar\"\n          max={range[1]}\n          min={range[0]}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          type=\"range\"\n          value={value * refValue}\n        />\n        <div\n          className=\"rangeSlider-indicator\"\n          style={{\n            width: `\n              ${simple ? (value / range[1]) * 100 : parseFloat(value, 10) * refValue}%\n            `,\n          }}\n        />\n      </div>\n      <div className={`hasUnit ${simple ? 'isPixel' : 'isPercentage'}`}>\n        <input\n          className=\"toolSection-input isSmall\"\n          max={range[1]}\n          min={range[0]}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          type=\"number\"\n          value={(value * refValue).toFixed(0)}\n        />\n      </div>\n    </div>\n  );\n};\n\nSlider.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n    range: PropTypes.arrayOf(PropTypes.number),\n    simple: PropTypes.bool,\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nSlider.defaultProps = {\n  config: {},\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(Slider);\n"],"names":["Slider","config","item","onItemChange","value","range","simple","refValue","onChange","e","newValue","target","id","key","onKeyDown","event","stopPropagation","shiftKey","preventDefault","diff","Number","_jsxs","_jsx","width","parseFloat","toFixed","propTypes","PropTypes","shape","string","options","arrayOf","any","number","bool","func","oneOfType","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Settings/Slider.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Slider = ({\n  config = {},\n  item = {},\n  onItemChange = () => {},\n  value = '',\n}) => {\n  const { range, simple } = config;\n  const refValue = simple ? 1 : 100;\n  const onChange = e => {\n    const newValue = e.target.value;\n    if (newValue !== value) {\n      if (newValue >= range[0] && newValue <= range[1]) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue / refValue },\n        );\n      }\n    }\n  };\n\n  const onKeyDown = event => {\n    event.stopPropagation();\n    if (event.shiftKey) {\n      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n        event.preventDefault();\n        const diff = event.key === 'ArrowUp' ? 10 : -10;\n        onChange({\n          target: {\n            value: Number(value) + diff,\n          },\n        });\n      }\n    }\n  };\n\n  return (\n    <div className=\"rangeSliderWrapper d-flex a-center\">\n      <div className=\"rangeSlider\">\n        <input\n          className=\"rangeSlider-bar\"\n          max={range[1]}\n          min={range[0]}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          type=\"range\"\n          value={value * refValue}\n        />\n        <div\n          className=\"rangeSlider-indicator\"\n          style={{\n            width: `\n              ${simple ? (value / range[1]) * 100 : parseFloat(value, 10) * refValue}%\n            `,\n          }}\n        />\n      </div>\n      <div className={`hasUnit ${simple ? 'isPixel' : 'isPercentage'}`}>\n        <input\n          className=\"toolSection-input isSmall\"\n          max={range[1]}\n          min={range[0]}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          type=\"number\"\n          value={(value * refValue).toFixed(0)}\n        />\n      </div>\n    </div>\n  );\n};\n\nSlider.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n    range: PropTypes.arrayOf(PropTypes.number),\n    simple: PropTypes.bool,\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nexport default memo(Slider);\n"],"names":["Slider","config","item","onItemChange","value","range","simple","refValue","onChange","e","newValue","target","id","key","onKeyDown","event","stopPropagation","shiftKey","preventDefault","diff","Number","_jsxs","_jsx","width","parseFloat","toFixed","propTypes","PropTypes","shape","string","options","arrayOf","any","number","bool","func","oneOfType","memo"],"mappings":"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"}

package/lib/esm/components/Settings/Switch.js

@@ -6,10 +6,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var Switch = function Switch(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange,
-      value = _ref.value;
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value;
 
   var onChange = function onChange(e) {
     var status = e.target.checked ? 'on' : 'off';
@@ -46,12 +50,6 @@ Switch.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-Switch.defaultProps = {
-  config: {},
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var Switch$1 = /*#__PURE__*/memo(Switch);
 
 export default Switch$1;