@widergy/energy-ui 3.28.0 → 3.30.0

package/dist/components/UTCheckList/versions/V1/README.MD

@@ -0,0 +1,134 @@
+# UTCheckList
+
+## Description
+
+`UTCheckList` is a customizable component that renders a list of checkboxes, allowing users to select multiple options from a provided list. It supports features like select all, indeterminate state, error display, and dynamic options. The "Select All" checkbox only affects options that are not disabled. Additionally, it allows for grouping options by category, with ungrouped options appearing first.
+
+## Props
+
+| Name              | Type             | Default | Description                                                                                                                                       |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).                |
+| error             | string           |         | Error message to display.                                                                                                                         |
+| horizontalSpacing | string           | large   | Spacing between the checkbox and the title horizontally.                                                                                          |
+| isSimple          | bool             | false   | Simplifies the selection process to only allow single checkbox selection.                                                                         |
+| onChange          | func.isRequired  |         | Function to call when the selection changes.                                                                                                      |
+| options           | arrayOf(shape)   |         | Array of options to be displayed as checkboxes. Each option is an object with `label`, `value`, `disabled`, `checked`, and optionally `category`. |
+| required          | bool             | false   | Indicates if the checklist is required.                                                                                                           |
+| reversed          | bool             | false   | If true, reverses the order of title and checkbox.                                                                                                |
+| selectAllLabel    | string           |         | Label for the "Select All" checkbox.                                                                                                              |
+| showSelectAll     | bool             | true    | Determines whether to show the "Select All" checkbox.                                                                                             |
+| title             | string           |         | Title for the checklist.                                                                                                                          |
+| value             | arrayOf(string)  | []      | Array of selected values.                                                                                                                         |
+| variant           | string           |         | Variant style for the checklist.                                                                                                                  |
+| verticalSpacing   | string           | large   | Spacing between the checkbox items vertically.                                                                                                    |
+
+### Option Object
+
+The `options` prop is an array of objects, each representing an option:
+
+| Name     | Type   | Description                                                                                                               |
+| -------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
+| category | string | (Optional) Category under which the option will be grouped. If not provided, the option will appear ungrouped at the top. |
+| checked  | bool   | Indicates if the option is checked.                                                                                       |
+| disabled | bool   | Indicates if the option is disabled.                                                                                      |
+| label    | string | Label to display for the option.                                                                                          |
+| value    | string | Value of the option.                                                                                                      |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3', disabled: true, checked: true }
+];
+
+const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      error="Please select at least one option"
+      title="Select Options"
+      onChange={setSelectedOptions}
+      options={options}
+      required
+      selectAllLabel="Select All"
+      value={selectedOptions}
+    />
+  );
+};
+
+export default Example;
+```
+
+### Categorized Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2', category: 'Group A' },
+  { label: 'Option 3', value: '3', category: 'Group B', disabled: true },
+  { label: 'Option 4', value: '4', category: 'Group A' }
+];
+
+const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      error="Please select at least one option"
+      title="Categorized CheckList"
+      onChange={setSelectedOptions}
+      options={options}
+      selectAllLabel="Select All"
+      value={selectedOptions}
+    />
+  );
+};
+
+export default Example;
+```
+
+### Custom Styles Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const customStyles = {
+  root: { padding: 10 },
+  checkboxesContainer: { backgroundColor: 'lightgrey' },
+  header: { color: 'blue' }
+};
+
+const Example = () => {
+  const options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' }
+  ];
+
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      title="Custom Styled CheckList"
+      onChange={setSelectedOptions}
+      options={options}
+      style={customStyles}
+      value={selectedOptions}
+    />
+  );
+};
+
+export default Example;
+```

package/dist/components/UTCheckList/versions/V1/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING = void 0;
+const SPACING = exports.SPACING = {
+  SMALL: 'small',
+  LARGE: 'large'
+};

package/dist/components/UTCheckList/versions/V1/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _utils = require("../../../UTValidation/utils");
+var _constants = require("../../../UTCheckbox/versions/V1/constants");
+var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
+var _utils2 = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable no-unused-vars */
+
+const UTCheckList = _ref => {
+  let {
+    classNames = {},
+    error,
+    horizontalSpacing = 'large',
+    isSimple = false,
+    onChange = () => {},
+    options,
+    required,
+    reversed,
+    selectAllLabel,
+    showSelectAll = true,
+    title,
+    value = null,
+    variant,
+    verticalSpacing = 'large'
+  } = _ref;
+  const reversedBasedOnVariant = (0, _utils2.getPropValueBasedOnVariant)(variant, reversed, true);
+  const verticalSpacingBasedOnVariant = (0, _utils2.getPropValueBasedOnVariant)(variant, verticalSpacing, _constants.SPACING.SMALL);
+  const smallVerticalSpacingClass = verticalSpacingBasedOnVariant === _constants.SPACING.SMALL ? _stylesModule.default.smallVerticalSpacing : '';
+  const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error, {
+    withIcon: false
+  }), [error]);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      const convertedValue = (0, _utils2.convertIfIsString)(value);
+      if (JSON.stringify(convertedValue) !== JSON.stringify(value)) {
+        onChange(convertedValue);
+      }
+    }
+  }, [value, onChange]);
+  const categorizedOptions = (0, _react.useMemo)(() => {
+    const optionsGrouped = options.reduce((groupedOptions, option) => {
+      const category = option.category || 'No Category';
+      if (!groupedOptions[category]) {
+        groupedOptions[category] = [];
+      }
+      groupedOptions[category].push(option);
+      return groupedOptions;
+    }, {
+      'No Category': []
+    });
+    return Object.entries(optionsGrouped).sort((_ref2, _ref3) => {
+      let [categoryA] = _ref2;
+      let [categoryB] = _ref3;
+      return categoryA === 'No Category' ? -1 : categoryB === 'No Category' ? 1 : 0;
+    });
+  }, [options]);
+  const enabledOptions = (0, _react.useMemo)(() => options.filter(option => !option.disabled), [options]);
+  const areAllSelected = (0, _react.useMemo)(() => enabledOptions.every(option => value === null || value === void 0 ? void 0 : value.includes(option.value)), [enabledOptions, value]);
+  const isIndeterminate = (0, _react.useMemo)(() => enabledOptions.some(option => value === null || value === void 0 ? void 0 : value.includes(option.value)) && !areAllSelected, [enabledOptions, value, areAllSelected]);
+  const handleChange = (0, _react.useCallback)(receivedValue => {
+    if (isSimple) {
+      onChange([receivedValue]);
+    } else {
+      const newValues = !(value !== null && value !== void 0 && value.includes(receivedValue)) ? [...(value || []), receivedValue] : value.filter(elem => elem !== receivedValue);
+      onChange(newValues);
+    }
+  }, [value, onChange, isSimple]);
+  const handleCheckAll = (0, _react.useCallback)(() => {
+    onChange(areAllSelected ? [] : enabledOptions.map(item => item.value));
+  }, [areAllSelected, enabledOptions, onChange]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(smallVerticalSpacingClass, " ").concat(classNames.root)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.headerContainer, " ").concat(classNames.header)
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    required: required
+  }, title), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    validationData: validationData
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.checkboxesContainer, " ").concat(smallVerticalSpacingClass, " ").concat(variant === _constants.BUTTON_VARIANT && _stylesModule.default.buttonVariant, " ").concat(classNames.checkboxesContainer)
+  }, showSelectAll && !isSimple && /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+    indeterminate: isIndeterminate,
+    onChange: handleCheckAll,
+    reversed: reversedBasedOnVariant,
+    spacing: horizontalSpacing,
+    className: classNames.selectAll,
+    title: selectAllLabel,
+    value: areAllSelected,
+    variant: variant,
+    version: "V1"
+  }), categorizedOptions.map(_ref4 => {
+    let [category, categoryOptions] = _ref4;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_stylesModule.default.categoryContainer, " ").concat(smallVerticalSpacingClass),
+      key: category
+    }, category !== 'No Category' && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      className: _stylesModule.default.categoryTitle,
+      colorTheme: "gray",
+      variant: "small",
+      weight: "medium"
+    }, category.toUpperCase()), categoryOptions.map(item => /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+      classNames: classNames.item,
+      disabled: item.disabled,
+      isSimple: isSimple,
+      key: item.value,
+      onChange: () => handleChange(item.value),
+      reversed: reversedBasedOnVariant,
+      spacing: horizontalSpacing,
+      title: item.label,
+      value: (0, _utils2.isChecked)(item, value),
+      variant: variant,
+      version: "V1"
+    })));
+  })));
+};
+UTCheckList.propTypes = {
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  error: _propTypes.string,
+  horizontalSpacing: _propTypes.string,
+  isSimple: _propTypes.bool,
+  onChange: _propTypes.func,
+  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    checked: _propTypes.bool,
+    disabled: _propTypes.bool,
+    label: _propTypes.string,
+    value: _propTypes.string,
+    category: _propTypes.string // Nueva propiedad opcional para la categoría
+  })),
+  required: _propTypes.bool,
+  reversed: _propTypes.bool,
+  selectAllLabel: _propTypes.string,
+  showSelectAll: _propTypes.bool,
+  title: _propTypes.string,
+  value: (0, _propTypes.arrayOf)(_propTypes.string),
+  variant: _propTypes.string,
+  verticalSpacing: _propTypes.string
+};
+var _default = exports.default = UTCheckList;

package/dist/components/UTCheckList/versions/V1/styles.module.scss

@@ -0,0 +1,40 @@
+$spacing-large: 16px;
+$spacing-small: 8px;
+
+.buttonVariant {
+  width: 100%;
+}
+
+.categoryContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: $spacing-large;
+}
+
+.categoryTitle {
+  padding: 8px 0;
+}
+
+.checkboxesContainer {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  grid-gap: $spacing-large;
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: $spacing-large;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.smallVerticalSpacing {
+  grid-gap: $spacing-small;
+}

package/dist/components/UTCheckList/versions/V1/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isChecked = exports.getPropValueBasedOnVariant = exports.convertIfIsString = void 0;
+var _lodash = require("lodash");
+var _constants = require("../../../UTCheckbox/versions/V1/constants");
+const isChecked = (item, inputValue) => inputValue && !!(inputValue !== null && inputValue !== void 0 && inputValue.find(elem => elem === item.value)) || item.disabled && item.checked;
+exports.isChecked = isChecked;
+const convertIfIsString = value => (0, _lodash.isString)(value) ? value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"')) : value;
+exports.convertIfIsString = convertIfIsString;
+const getPropValueBasedOnVariant = (variant, prop, defaultValue) => variant === _constants.BUTTON_VARIANT ? prop !== null && prop !== void 0 ? prop : defaultValue : prop;
+exports.getPropValueBasedOnVariant = getPropValueBasedOnVariant;

package/dist/components/UTCheckbox/index.js

@@ -4,139 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-var _form = require("@widergy/web-utils/lib/form");
-var _energyHooks = require("@widergy/energy-hooks");
-var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
-var _formTypes = require("../../types/formTypes");
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _classesUtils = require("../../utils/classesUtils");
-var _theme = require("./theme");
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var Checked = function Checked(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"
-  }));
-};
-Checked.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "5 6.58 14 10.42"
-};
 const UTCheckbox = _ref => {
   let {
-    classes: themeClasses = {},
-    classNames,
-    color = 'primary',
-    checkboxDataTestId,
-    CustomCheckedIcon = Checked,
-    customRowLabel: CustomRowLabel,
-    CustomUncheckedIcon = _ref2 => {
-      let {
-        className
-      } = _ref2;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
-      });
-    },
-    disabled,
-    disableRipple,
-    input,
-    item,
-    label,
-    labelDataTestId,
-    labelProps = {},
-    meta,
-    onChange,
-    showError,
-    tooltipContent,
-    useCustomIcons,
-    value
+    version = 'V0',
+    ...props
   } = _ref;
-  const [checkedRef, setChecked] = (0, _energyHooks.useMutableState)(value);
-  const handleChange = event => {
-    if (onChange) onChange(value);
-    if (input !== null && input !== void 0 && input.onChange) input.onChange(event.target.checked);
-  };
-  (0, _react.useEffect)(() => {
-    setChecked(value || (input === null || input === void 0 ? void 0 : input.value));
-  }, [input === null || input === void 0 ? void 0 : input.value, value]);
-  const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
-    disabled: disabled,
-    control: /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
-      content: tooltipContent,
-      stringContentClassName: _stylesModule.default.disableSelectionTooltip,
-      tippyProps: _constants.tippyProps
-    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-      classes: {
-        colorPrimary: classes.checkboxColorPrimary,
-        colorSecondary: classes.checkboxColorSecondary
-      },
-      checkedIcon: useCustomIcons && /*#__PURE__*/_react.default.createElement(CustomCheckedIcon, {
-        className: classes.checkedIcon
-      }),
-      inputProps: {
-        'data-testid': checkboxDataTestId
-      },
-      icon: useCustomIcons && /*#__PURE__*/_react.default.createElement(CustomUncheckedIcon, {
-        className: classes.uncheckedIcon
-      }),
-      checked: checkedRef.current || false,
-      onChange: handleChange,
-      value: (input === null || input === void 0 ? void 0 : input.value) || value,
-      color: color,
-      disableRipple: disableRipple,
-      disabled: disabled
-    }))),
-    label: CustomRowLabel ? /*#__PURE__*/_react.default.createElement(CustomRowLabel, {
-      item: item
-    }) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-      className: classes.label,
-      dataTestId: labelDataTestId,
-      variant: "small",
-      withMarkdown: true
-    }, labelProps), label),
-    classes: classes && {
-      root: classes.root,
-      label: classes.label
-    }
-  }), showError && (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    colorTheme: "error",
-    variant: "small"
-  }, meta.error));
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTCheckbox.propTypes = {
-  classes: (0, _propTypes.shape)({
-    checkboxColorPrimary: _propTypes.string,
-    checkboxColorSecondary: _propTypes.string
-  }),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  color: _propTypes.string,
-  checkboxDataTestId: _propTypes.string,
-  CustomCheckedIcon: _propTypes.node,
-  customRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
-  CustomUncheckedIcon: _propTypes.node,
-  disabled: _propTypes.bool,
-  disableRipple: _propTypes.bool,
-  input: _formTypes.inputPropTypes,
-  item: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.object]),
-  label: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
-  labelDataTestId: _propTypes.string,
-  labelProps: _propTypes.object,
-  meta: _formTypes.metaPropTypes,
-  onChange: _propTypes.func,
-  showError: _propTypes.bool,
-  tooltipContent: _propTypes.element,
-  useCustomIcons: _propTypes.bool,
-  value: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string])
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTCheckbox);
+var _default = exports.default = UTCheckbox;

package/dist/components/UTCheckbox/versions/V0/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _form = require("@widergy/web-utils/lib/form");
+var _energyHooks = require("@widergy/energy-hooks");
+var _formTypes = require("../../../../types/formTypes");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var Checked = function Checked(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"
+  }));
+};
+Checked.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "5 6.58 14 10.42"
+};
+const UTCheckbox = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    color = 'primary',
+    checkboxDataTestId,
+    CustomCheckedIcon = Checked,
+    customRowLabel: CustomRowLabel,
+    CustomUncheckedIcon = _ref2 => {
+      let {
+        className
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      });
+    },
+    disabled,
+    disableRipple,
+    input,
+    item,
+    label,
+    labelDataTestId,
+    labelProps = {},
+    meta,
+    onChange,
+    showError,
+    tooltipContent,
+    useCustomIcons,
+    value
+  } = _ref;
+  const [checkedRef, setChecked] = (0, _energyHooks.useMutableState)(value);
+  const handleChange = event => {
+    if (onChange) onChange(value);
+    if (input !== null && input !== void 0 && input.onChange) input.onChange(event.target.checked);
+  };
+  (0, _react.useEffect)(() => {
+    setChecked(value || (input === null || input === void 0 ? void 0 : input.value));
+  }, [input === null || input === void 0 ? void 0 : input.value, value]);
+  const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
+    disabled: disabled,
+    control: /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+      content: tooltipContent,
+      stringContentClassName: _stylesModule.default.disableSelectionTooltip,
+      tippyProps: _constants.tippyProps
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      classes: {
+        colorPrimary: classes.checkboxColorPrimary,
+        colorSecondary: classes.checkboxColorSecondary
+      },
+      checkedIcon: useCustomIcons && /*#__PURE__*/_react.default.createElement(CustomCheckedIcon, {
+        className: classes.checkedIcon
+      }),
+      inputProps: {
+        'data-testid': checkboxDataTestId
+      },
+      icon: useCustomIcons && /*#__PURE__*/_react.default.createElement(CustomUncheckedIcon, {
+        className: classes.uncheckedIcon
+      }),
+      checked: checkedRef.current || false,
+      onChange: handleChange,
+      value: (input === null || input === void 0 ? void 0 : input.value) || value,
+      color: color,
+      disableRipple: disableRipple,
+      disabled: disabled
+    }))),
+    label: CustomRowLabel ? /*#__PURE__*/_react.default.createElement(CustomRowLabel, {
+      item: item
+    }) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+      className: classes.label,
+      dataTestId: labelDataTestId,
+      variant: "small",
+      withMarkdown: true
+    }, labelProps), label),
+    classes: classes && {
+      root: classes.root,
+      label: classes.label
+    }
+  }), showError && (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "error",
+    variant: "small"
+  }, meta.error));
+};
+UTCheckbox.propTypes = {
+  classes: (0, _propTypes.shape)({
+    checkboxColorPrimary: _propTypes.string,
+    checkboxColorSecondary: _propTypes.string
+  }),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  color: _propTypes.string,
+  checkboxDataTestId: _propTypes.string,
+  CustomCheckedIcon: _propTypes.node,
+  customRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
+  CustomUncheckedIcon: _propTypes.node,
+  disabled: _propTypes.bool,
+  disableRipple: _propTypes.bool,
+  input: _formTypes.inputPropTypes,
+  item: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.object]),
+  label: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+  labelDataTestId: _propTypes.string,
+  labelProps: _propTypes.object,
+  meta: _formTypes.metaPropTypes,
+  onChange: _propTypes.func,
+  showError: _propTypes.bool,
+  tooltipContent: _propTypes.element,
+  useCustomIcons: _propTypes.bool,
+  value: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string])
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTCheckbox);

package/dist/components/UTCheckbox/{theme.js → versions/V0/theme.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   let {