@pareto-engineering/design-system 4.0.0-alpha.73 → 4.0.0-alpha.75

package/dist/cjs/a/DatePicker/DatePicker.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDayPicker = require("react-day-picker");
+var _dateFns = require("date-fns");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'date-picker';
+
+/**
+ * This is the component description.
+ */
+const DatePickerWrapper = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    mode,
+    selected,
+    setSelection,
+    fromMonth,
+    toDate,
+    customFooter,
+    timeFrom,
+    setTimeFrom,
+    timeTo,
+    setTimeTo,
+    dateFormat,
+    showDebugger,
+    ...otherProps
+  } = _ref;
+  const convertFooterText = selection => {
+    if (mode === 'single') {
+      return (0, _dateFns.format)(selection, dateFormat);
+    }
+    if (mode === 'multiple') {
+      return selection.map(date => (0, _dateFns.format)(date, dateFormat)).join(', ');
+    }
+    if (mode === 'range') {
+      return selection.from && selection.to ? `${(0, _dateFns.format)(selection.from, dateFormat)} - ${(0, _dateFns.format)(selection.to, dateFormat)}` : 'Please pick an additional day.';
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_reactDayPicker.DayPicker, _extends({
+    mode: mode,
+    selected: selected,
+    onSelect: setSelection,
+    fromMonth: fromMonth,
+    toDate: toDate,
+    showOutsideDays: true,
+    footer: customFooter || /*#__PURE__*/React.createElement("div", {
+      className: "default-footer"
+    }, timeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+      className: "time-label s-1"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon"
+    }, "C"), "\xA0 Time"), /*#__PURE__*/React.createElement("div", {
+      className: `time-inputs${timeTo ? ' multiple' : ''}`
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "s-1",
+      type: "time",
+      value: timeFrom,
+      onChange: e => setTimeFrom(e.target.value)
+    }), timeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "icon s-2"
+    }, "r"), /*#__PURE__*/React.createElement("input", {
+      className: "s-1",
+      type: "time",
+      value: timeTo,
+      onChange: e => setTimeTo(e.target.value)
+    })))), /*#__PURE__*/React.createElement("p", {
+      className: "s-1 footer-text"
+    }, selected && convertFooterText(selected)))
+  }, otherProps)), showDebugger && /*#__PURE__*/React.createElement("div", {
+    className: "debugger"
+  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(selected, null, 2))));
+};
+DatePickerWrapper.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The mode for this date picker.
+   */
+  mode: _propTypes.default.oneOf(['single', 'multiple', 'range']),
+  /**
+   * The current selection.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  selected: _propTypes.default.objectOf(_propTypes.default.any).isRequired,
+  /**
+   * The function to update the selection.
+   */
+  setSelection: _propTypes.default.func.isRequired,
+  /**
+   * The earliest month to display.
+   */
+  fromMonth: _propTypes.default.instanceOf(Date),
+  /**
+   * The latest month to display.
+   */
+  toDate: _propTypes.default.instanceOf(Date),
+  /**
+   * Custom footer component.
+   */
+  customFooter: _propTypes.default.node,
+  /**
+   * The start time.
+   */
+  timeFrom: _propTypes.default.string,
+  /**
+   * The function to update the start time.
+   */
+  setTimeFrom: _propTypes.default.func,
+  /**
+   * The end time.
+   */
+  timeTo: _propTypes.default.string,
+  /**
+   * The function to update the end time.
+   */
+  setTimeTo: _propTypes.default.func,
+  /**
+   * The date format.
+   */
+  dateFormat: _propTypes.default.string,
+  /**
+   * Show the debugger.
+   */
+  showDebugger: _propTypes.default.bool
+};
+DatePickerWrapper.defaultProps = {
+  mode: 'single',
+  dateFormat: 'PPP',
+  showDebugger: false
+};
+var _default = exports.default = DatePickerWrapper;

package/dist/cjs/a/DatePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.default;
+  }
+});
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/DatePicker/styles.scss

@@ -0,0 +1,380 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- needed here */
+/* stylelint-disable selector-class-pattern -- needed here */
+/* stylelint-disable selector-max-compound-selectors -- needed here */
+/* stylelint-disable declaration-no-important -- needed here */
+/* stylelint-disable font-weight-notation -- needed here */
+/* stylelint-disable declaration-block-no-duplicate-properties -- needed here */
+
+@use "@pareto-engineering/bem";
+
+$default-background: var(--background-far);
+$default-border: var(--theme-default-input-border);
+$default-input-border-radius: var(--theme-default-input-border-radius);
+$default-padding: .55em .75em;
+$default-spacing-size: calc(var(--gap) / 2);
+$rdp-cell-size: 40px;
+$rdp-caption-font-size: 1em;
+$rdp-accent-color: var(--hard-interactive);
+$rdp-outline: 2px solid var(--hard-interactive);
+$rdp-selected-color: var(--on-interactive);
+
+.#{bem.$base}.date-picker {
+  /* Hide elements for devices that are not screen readers */
+  .rdp-vhidden {
+    appearance: none;
+    appearance: none;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border: 0 !important;
+    box-sizing: border-box;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    height: 1px !important;
+    margin: 0;
+    overflow: hidden !important;
+    padding: 0;
+    padding: 0 !important;
+    position: absolute !important;
+    top: 0;
+    width: 1px !important;
+  }
+
+  /* Buttons */
+  .rdp-button_reset {
+    appearance: none;
+    appearance: none;
+    appearance: none;
+    background: none;
+    color: inherit;
+    cursor: default;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  .rdp-button_reset:focus-visible {
+    /* Make sure to reset outline only when :focus-visible is supported */
+    outline: none;
+  }
+
+  .rdp-button {
+    border: 2px solid transparent;
+  }
+
+  .rdp-button[disabled]:not(.rdp-day_selected) {
+    opacity: .25;
+  }
+
+  .rdp-button:not([disabled]) {
+    cursor: pointer;
+  }
+
+  .rdp-button:focus-visible:not([disabled]) {
+    background-color: $default-background;
+    border: $rdp-outline;
+    color: inherit;
+  }
+
+  .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+    background-color: $default-background;
+  }
+
+  .rdp-months {
+    display: flex;
+  }
+
+  .rdp-month {
+    margin: 0 1em;
+  }
+
+  .rdp-month:first-child {
+    margin-left: 0;
+  }
+
+  .rdp-month:last-child {
+    margin-right: 0;
+  }
+
+  .rdp-table {
+    background-color: $default-background;
+    border-collapse: collapse;
+    margin: 0;
+    max-width: calc($rdp-cell-size * 7);
+  }
+
+  .rdp-with_weeknumber .rdp-table {
+    border-collapse: collapse;
+    max-width: calc($rdp-cell-size * 8);
+  }
+
+  .rdp-caption {
+    align-items: center;
+    background-color: $default-background;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    text-align: left;
+  }
+
+  .rdp-multiple_months .rdp-caption {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .rdp-caption_dropdowns {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .rdp-caption_label {
+    align-items: center;
+    border: 0;
+    border: 2px solid transparent;
+    color: var(--heading);
+    display: inline-flex;
+    font-family: inherit;
+    font-size: $rdp-caption-font-size;
+    font-weight: bold;
+    margin: 0;
+    padding: 0 .25em;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .rdp-nav {
+    white-space: nowrap;
+  }
+
+  .rdp-multiple_months .rdp-caption_start .rdp-nav {
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .rdp-multiple_months .rdp-caption_end .rdp-nav {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .rdp-nav_button {
+    align-items: center;
+    border-radius: 100%;
+    display: inline-flex;
+    height: $rdp-cell-size;
+    justify-content: center;
+    padding: .25em;
+    width: $rdp-cell-size;
+  }
+
+  /* ---------- */
+
+  /* Dropdowns  */
+
+  /* ---------- */
+
+  .rdp-dropdown_year,
+  .rdp-dropdown_month {
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .rdp-dropdown {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    bottom: 0;
+    cursor: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    left: 0;
+    line-height: inherit;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
+
+  .rdp-dropdown[disabled] {
+    color: unset;
+    opacity: unset;
+  }
+
+  .rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+    background-color: $default-background;
+    border: $rdp-outline;
+    border-radius: 6px;
+  }
+
+  .rdp-dropdown_icon {
+    margin: 0 0 0 5px;
+  }
+
+  .rdp-head {
+    border: 0;
+  }
+
+  .rdp-head_row,
+  .rdp-row {
+    height: 100%;
+  }
+
+  .rdp-head_cell {
+    font-size: .75em;
+    font-weight: 700;
+    height: 100%;
+    height: $rdp-cell-size;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    vertical-align: middle;
+  }
+
+  .rdp-tbody {
+    border: 0;
+  }
+
+  .rdp-tfoot {
+    margin: .5em;
+
+    .default-footer {
+      display: flex;
+      flex-direction: column;
+
+      >.footer-text {
+        align-self: center;
+      }
+
+      >.time-label {
+        align-items: center;
+        align-self: first baseline;
+        color: var(--heading);
+        display: flex;
+        margin: 0;
+        padding: $default-spacing-size;
+      }
+
+      >.time-inputs {
+        :not(.multiple) {
+          margin-left: $default-spacing-size;
+        }
+
+        &.multiple {
+          align-items: center;
+          align-self: center;
+          display: flex;
+          gap: $default-spacing-size;
+        }
+
+        >input[type="time"] {
+          background-color: $default-background;
+          border: $default-border;
+          border-radius: $default-input-border-radius;
+          color: var(--paragraph);
+          outline: none;
+          padding: $default-padding;
+
+          &::-webkit-calendar-picker-indicator {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+            background-position: calc(100% - $default-spacing-size / 2);
+            background-repeat: no-repeat;
+            background-size: $default-spacing-size;
+          }
+        }
+      }
+    }
+  }
+
+  .rdp-cell {
+    height: 100%;
+    height: $rdp-cell-size;
+    padding: 0;
+    text-align: center;
+    width: $rdp-cell-size;
+  }
+
+  .rdp-weeknumber {
+    font-size: .75em;
+  }
+
+  .rdp-weeknumber,
+  .rdp-day {
+    align-items: center;
+    border: 2px solid transparent;
+    border-radius: 100%;
+    box-sizing: border-box;
+    display: flex;
+    height: $rdp-cell-size;
+    justify-content: center;
+    margin: 0;
+    max-width: $rdp-cell-size;
+    overflow: hidden;
+    width: $rdp-cell-size;
+  }
+
+  .rdp-day_today:not(.rdp-day_outside) {
+    font-weight: bold;
+  }
+
+  .rdp-day_selected,
+  .rdp-day_selected:focus-visible,
+  .rdp-day_selected:hover {
+    background-color: $rdp-accent-color;
+    color: $rdp-selected-color;
+    opacity: 1;
+  }
+
+  .rdp-day_outside {
+    opacity: .5;
+  }
+
+  .rdp-day_selected:focus-visible {
+    /* Since the background is the same use again the outline */
+    outline: $rdp-outline;
+    outline-offset: 2px;
+    z-index: 1;
+  }
+
+  .rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .rdp-day_range_end.rdp-day_range_start {
+    border-radius: 100%;
+  }
+
+  .rdp-day_range_middle {
+    background-color: var(--interactive);
+    border-radius: 0;
+  }
+
+  .rdp-nav_icon {
+    color: var(--ui-icons);
+  }
+}

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -38,6 +38,7 @@ const XMLEditor = _ref => {
     gutterWidth,
     config,
     onChange,
+    onBlur,
     stopPropagationKeys
   } = _ref;
   const editorRef = (0, _react.useRef)();
@@ -47,6 +48,10 @@ const XMLEditor = _ref => {
       extensions: [_view.keymap.of(_commands.defaultKeymap), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
+      }), _view.EditorView.focusChangeEffect.of((state, focused) => {
+        if (!focused) {
+          onBlur?.(state);
+        }
       }), _view.EditorView.domEventHandlers({
         keydown(e) {
           if (stopPropagationKeys?.includes(e.key)) {

package/dist/cjs/a/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "Conversation", {
     return _Conversation.Conversation;
   }
 });
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
 Object.defineProperty(exports, "DotInfo", {
   enumerable: true,
   get: function () {
@@ -209,4 +215,5 @@ var _TextSteps = require("./TextSteps");
 var _Removable = require("./Removable");
 var _ToggleSwitch = require("./ToggleSwitch");
 var _XMLEditor = require("./XMLEditor");
-var _LexicalPreview = require("./LexicalPreview");
+var _LexicalPreview = require("./LexicalPreview");
+var _DatePicker = require("./DatePicker");

package/dist/cjs/f/fields/SelectInput/SelectInput.js

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
-var _formik = require("formik");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _a = require("../../../a");
-var _common = require("../../common");
 require("./styles.scss");
+var _common = require("./common");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */
+/* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
 
 const baseClassName = _exports.default.base;
@@ -39,49 +38,33 @@ const SelectInput = _ref => {
     description,
     disabled,
     isLoading,
-    autoComplete
+    autoComplete,
+    placeholder,
+    getTagColor,
+    multiple
     // ...otherProps
   } = _ref;
-  const [field] = (0, _formik.useField)({
+  const inputProps = {
     name,
-    validate
-  });
+    label,
+    labelColor,
+    color,
+    options,
+    validate,
+    optional,
+    description,
+    disabled,
+    isLoading,
+    placeholder,
+    getTagColor,
+    autoComplete
+  };
+  const Input = multiple ? _common.Multiple : _common.Single;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: `select-wrapper${disabled ? ' disabled' : ''}`
-  }, /*#__PURE__*/React.createElement("select", _extends({
-    className: `input y-${color}`
-  }, field, {
-    value: field.value || '',
-    id: name,
-    disabled: disabled,
-    autoComplete: autoComplete
-  }), options.map(option => {
-    // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
-    const newOption = typeof option === 'string' ? {
-      value: option,
-      label: option
-    } : option;
-    return /*#__PURE__*/React.createElement("option", {
-      key: newOption.value,
-      value: newOption.value,
-      disabled: newOption?.disabled || false
-    }, newOption.label);
-  })), isLoading && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
-    className: "x-main"
-  })), /*#__PURE__*/React.createElement(_common.FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  }));
+  }, /*#__PURE__*/React.createElement(Input, inputProps));
 };
 SelectInput.propTypes = {
   /**
@@ -143,10 +126,18 @@ SelectInput.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: _propTypes.default.bool
+  optional: _propTypes.default.bool,
+  /**
+   * Whether the select input should allow multiple selections
+   */
+  multiple: _propTypes.default.bool,
+  /**
+   * The placeholder of the select input
+   */
+  placeholder: _propTypes.default.string
 };
 SelectInput.defaultProps = {
   disabled: false,
-  color: 'paragraph'
+  multiple: false
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SelectInput);