@snack-uikit/fields 0.29.6 → 0.29.7-preview-ba12ca94.0

package/dist/cjs/components/FieldColor/FieldColor.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const color_picker_1 = require("@snack-uikit/color-picker");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const input_private_1 = require("@snack-uikit/input-private");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const hooks_1 = require("../../hooks");
+const getValidationState_1 = require("../../utils/getValidationState");
+const FieldDecorator_1 = require("../FieldDecorator");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.FieldColor = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      id,
+      name,
+      value: valueProp,
+      disabled = false,
+      readonly = false,
+      showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
+      open,
+      onChange,
+      onOpenChange,
+      className,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      caption,
+      hint,
+      showHintIcon,
+      size = input_private_1.SIZE.S,
+      validationState = constants_1.VALIDATION_STATE.Default,
+      error,
+      withAlpha,
+      autoApply,
+      placeholder,
+      onFocus,
+      onBlur
+    } = _a,
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onChange", "onOpenChange", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "withAlpha", "autoApply", "placeholder", "onFocus", "onBlur"]);
+  const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
+  const localRef = (0, react_1.useRef)(null);
+  const showDropList = isOpen && !readonly && !disabled;
+  const fieldValidationState = (0, getValidationState_1.getValidationState)({
+    validationState,
+    error
+  });
+  const [value = '', setValue] = (0, utils_1.useValueControl)({
+    value: valueProp || '',
+    onChange: onChange
+  });
+  const clearButtonRef = (0, react_1.useRef)(null);
+  const copyButtonRef = (0, react_1.useRef)(null);
+  const showAdditionalButton = Boolean(value && !disabled);
+  const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
+  const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+  const onClear = () => {
+    var _a;
+    setValue === null || setValue === void 0 ? void 0 : setValue('');
+    if (required) {
+      (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  };
+  const clearButtonSettings = (0, input_private_1.useClearButton)({
+    clearButtonRef,
+    showClearButton,
+    size,
+    onClear
+  });
+  const copyButtonSettings = (0, hooks_1.useCopyButton)({
+    copyButtonRef,
+    showCopyButton,
+    size,
+    valueToCopy: value
+  });
+  const {
+    postfixButtons,
+    inputTabIndex,
+    onInputKeyDown
+  } = (0, input_private_1.useButtonNavigation)({
+    inputRef: localRef,
+    postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+    readonly,
+    submitKeys: ['Enter', 'Space', 'Tab']
+  });
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (open) {
+      (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [open]);
+  return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
+    className: className,
+    label: label,
+    labelTooltip: labelTooltip,
+    labelTooltipPlacement: labelTooltipPlacement,
+    labelFor: id,
+    required: required,
+    caption: caption,
+    hint: hint,
+    disabled: disabled,
+    readonly: readonly,
+    showHintIcon: showHintIcon,
+    size: size,
+    error: error,
+    validationState: fieldValidationState
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({
+      trigger: 'click',
+      triggerClassName: styles_module_scss_1.default.triggerClassName,
+      widthStrategy: 'auto'
+    }, readonly || disabled ? {
+      open: false
+    } : {
+      open: showDropList,
+      onOpenChange: setIsOpen
+    }, {
+      content: (0, jsx_runtime_1.jsx)(color_picker_1.ColorPicker, {
+        withAlpha: withAlpha,
+        autoApply: autoApply,
+        value: value,
+        onChange: _ref => {
+          let {
+            hex
+          } = _ref;
+          setValue === null || setValue === void 0 ? void 0 : setValue(hex || '');
+        },
+        colorMode: {
+          hex: false
+        }
+      }),
+      children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
+        className: styles_module_scss_1.default.container,
+        size: size,
+        validationState: fieldValidationState,
+        disabled: disabled,
+        readonly: readonly,
+        variant: constants_1.CONTAINER_VARIANT.SingleLine,
+        focused: showDropList,
+        inputRef: localRef,
+        postfix: postfixButtons,
+        prefix: (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.colorPreview,
+          style: {
+            '--color': value
+          }
+        }),
+        children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
+          ref: (0, merge_refs_1.default)(ref, localRef),
+          "data-size": size,
+          value: value,
+          onChange: onChange,
+          onFocus: onFocus,
+          onBlur: onBlur,
+          tabIndex: inputTabIndex,
+          onKeyDown: onInputKeyDown,
+          disabled: disabled,
+          readonly: readonly,
+          placeholder: placeholder,
+          type: 'text',
+          id: id,
+          name: name,
+          "data-test-id": 'field-color__input'
+        })
+      })
+    }))
+  }));
+});

package/dist/cjs/components/FieldColor/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./FieldColor"), exports);

package/dist/cjs/components/FieldDate/FieldDate.js

@@ -0,0 +1,282 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldDate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const calendar_1 = require("@snack-uikit/calendar");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const icons_1 = require("@snack-uikit/icons");
+const input_private_1 = require("@snack-uikit/input-private");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const hooks_1 = require("../../hooks");
+const getValidationState_1 = require("../../utils/getValidationState");
+const FieldDecorator_1 = require("../FieldDecorator");
+const constants_2 = require("./constants");
+const hooks_2 = require("./hooks");
+const useFocusHandlers_1 = require("./hooks/useFocusHandlers");
+const useHandlers_1 = require("./hooks/useHandlers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+const CALENDAR_SIZE_MAP = {
+  [input_private_1.SIZE.S]: 's',
+  [input_private_1.SIZE.M]: 'm',
+  [input_private_1.SIZE.L]: 'm'
+};
+exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      id,
+      name,
+      value: valueProp,
+      disabled = false,
+      readonly = false,
+      showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
+      open,
+      onOpenChange,
+      onChange,
+      onFocus,
+      onBlur: onBlurProp,
+      className,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      caption,
+      hint,
+      showHintIcon,
+      size = input_private_1.SIZE.S,
+      validationState = constants_1.VALIDATION_STATE.Default,
+      locale = constants_2.DEFAULT_LOCALE,
+      buildCellProps,
+      error
+    } = _a,
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "locale", "buildCellProps", "error"]);
+  const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
+  const [pickerAutofocus, setPickerAutofocus] = (0, react_1.useState)(false);
+  const localRef = (0, react_1.useRef)(null);
+  const clearButtonRef = (0, react_1.useRef)(null);
+  const copyButtonRef = (0, react_1.useRef)(null);
+  const calendarIconSize = size === input_private_1.SIZE.S ? input_private_1.ICON_SIZE.Xs : input_private_1.ICON_SIZE.S;
+  const showDropList = isOpen && !readonly && !disabled;
+  const showAdditionalButton = Boolean(valueProp && !disabled);
+  const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
+  const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+  const fieldValidationState = (0, getValidationState_1.getValidationState)({
+    validationState,
+    error
+  });
+  const checkForLeavingFocus = (0, react_1.useCallback)(event => {
+    if (event.key === 'ArrowDown') {
+      setPickerAutofocus(true);
+      setIsOpen(true);
+    }
+  }, [setIsOpen]);
+  const handleClear = (0, react_1.useCallback)(() => {
+    var _a, _b, _c;
+    onChange && onChange('');
+    if ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+      localRef.current.value = '';
+    }
+    if (required) {
+      (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      setIsOpen(true);
+    } else {
+      (_c = localRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+      setIsOpen(false);
+    }
+  }, [onChange, required, setIsOpen]);
+  const clearButtonSettings = (0, input_private_1.useClearButton)({
+    clearButtonRef,
+    showClearButton,
+    size,
+    onClear: handleClear
+  });
+  const copyButtonSettings = (0, hooks_1.useCopyButton)({
+    copyButtonRef,
+    showCopyButton,
+    size,
+    valueToCopy: valueProp || ''
+  });
+  const calendarIcon = (0, react_1.useMemo)(() => ({
+    active: false,
+    show: true,
+    id: 'calendarIcon',
+    render: props => (0, jsx_runtime_1.jsx)(icons_1.CalendarSVG, Object.assign({}, props, {
+      size: calendarIconSize,
+      className: styles_module_scss_1.default.calendarIcon,
+      "data-size": size
+    }))
+  }), [calendarIconSize, size]);
+  const memorizedButtons = (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings, calendarIcon], [clearButtonSettings, copyButtonSettings, calendarIcon]);
+  const {
+    value,
+    handleChange,
+    handleClick: dateInputClickHandler,
+    handleKeyDown: dateInputKeyDownHandler,
+    handleBlur: dateInputBlurHandler,
+    mask,
+    setInputFocus
+  } = (0, hooks_2.useDateField)({
+    inputRef: localRef,
+    onChange,
+    readonly,
+    locale,
+    setIsOpen
+  });
+  const setInputFocusFromButtons = (0, react_1.useCallback)(() => setInputFocus(constants_2.SlotKey.Year), [setInputFocus]);
+  const {
+    postfixButtons,
+    inputTabIndex,
+    onInputKeyDown: navigationInputKeyDownHandler,
+    setInitialTabIndices
+  } = (0, input_private_1.useButtonNavigation)({
+    setInputFocus: setInputFocusFromButtons,
+    inputRef: localRef,
+    postfixButtons: memorizedButtons,
+    onButtonKeyDown: checkForLeavingFocus,
+    readonly,
+    submitKeys: ['Enter', 'Space', 'Tab']
+  });
+  // TODO: do not hardcode locale here
+  const handleSelectDate = date => {
+    var _a;
+    onChange && onChange(date.toLocaleDateString(constants_2.DEFAULT_LOCALE));
+    (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    setIsOpen(false);
+  };
+  const handleCalendarFocusLeave = () => {
+    setInitialTabIndices();
+    // TODO: find out why it works not as expected (focus is moved to the next element instead of the focused one)
+    // maybe floating-ui causes the problem
+    (0, input_private_1.runAfterRerender)(() => {
+      setInputFocus(constants_2.SlotKey.Day);
+      setIsOpen(false);
+    });
+  };
+  const handleInputKeyDown = (0, useHandlers_1.useHandlers)([checkForLeavingFocus, dateInputKeyDownHandler, navigationInputKeyDownHandler]);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (open) {
+      (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [open]);
+  (0, react_1.useEffect)(() => {
+    if (localRef.current) {
+      localRef.current.value = valueProp;
+    }
+  }, [valueProp]);
+  const onFocusByKeyboard = (0, react_1.useCallback)(e => {
+    setInputFocus();
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }, [onFocus, setInputFocus]);
+  const inputHandlers = (0, useFocusHandlers_1.useFocusHandlers)({
+    onFocusByClick: onFocus,
+    onFocusByKeyboard
+  });
+  const onBlur = (0, useHandlers_1.useHandlers)([dateInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+  const onClick = (0, react_1.useCallback)(e => {
+    dateInputClickHandler();
+    if (isOpen) {
+      // stop the event because want picker to stay opened
+      e.stopPropagation();
+    }
+  }, [dateInputClickHandler, isOpen]);
+  return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
+    className: className,
+    label: label,
+    labelTooltip: labelTooltip,
+    labelTooltipPlacement: labelTooltipPlacement,
+    labelFor: id,
+    required: required,
+    caption: caption,
+    hint: hint,
+    disabled: disabled,
+    readonly: readonly,
+    showHintIcon: showHintIcon,
+    size: size,
+    error: error,
+    validationState: fieldValidationState
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({
+      trigger: 'click',
+      triggerClassName: styles_module_scss_1.default.triggerClassName,
+      widthStrategy: 'auto'
+    }, readonly || disabled ? {
+      open: false
+    } : {
+      open: showDropList,
+      onOpenChange: setIsOpen
+    }, {
+      content: (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.calendarWrapper,
+        "data-size": size,
+        children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
+          mode: 'date',
+          size: CALENDAR_SIZE_MAP[size],
+          value: valueProp ? (0, utils_2.parseDate)(valueProp) : undefined,
+          onChangeValue: handleSelectDate,
+          buildCellProps: buildCellProps,
+          navigationStartRef: element => {
+            if (pickerAutofocus) {
+              element === null || element === void 0 ? void 0 : element.focus();
+              setPickerAutofocus(false);
+            }
+          },
+          onFocusLeave: handleCalendarFocusLeave,
+          locale: locale,
+          "data-test-id": 'field-date__calendar'
+        })
+      }),
+      children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
+        className: styles_module_scss_1.default.container,
+        size: size,
+        validationState: fieldValidationState,
+        disabled: disabled,
+        readonly: readonly,
+        variant: constants_1.CONTAINER_VARIANT.SingleLine,
+        focused: showDropList,
+        inputRef: localRef,
+        postfix: postfixButtons,
+        children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
+          ref: (0, merge_refs_1.default)(ref, localRef),
+          "data-size": size,
+          value: value || '',
+          placeholder: mask,
+          onChange: handleChange,
+          onFocus: inputHandlers.onFocus,
+          onMouseDown: inputHandlers.onMouseDown,
+          onBlur: onBlur,
+          onKeyDown: handleInputKeyDown,
+          onClick: onClick,
+          disabled: disabled,
+          readonly: readonly,
+          tabIndex: inputTabIndex,
+          type: 'text',
+          id: id,
+          name: name,
+          "data-test-id": 'field-date__input'
+        })
+      })
+    }))
+  }));
+});

package/dist/cjs/components/FieldDate/constants.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SLOTS_PLACEHOLDER = exports.SLOTS = exports.DEFAULT_LOCALE = exports.MASK = exports.SlotKey = void 0;
+var SlotKey;
+(function (SlotKey) {
+  SlotKey["Day"] = "D";
+  SlotKey["Month"] = "M";
+  SlotKey["Year"] = "Y";
+})(SlotKey || (exports.SlotKey = SlotKey = {}));
+exports.MASK = {
+  'ru-RU': 'ДД.ММ.ГГГГ',
+  'en-US': 'DD.MM.YYYY'
+};
+exports.DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+exports.SLOTS = {
+  [SlotKey.Day]: {
+    start: 0,
+    end: 2,
+    max: 31,
+    min: 1
+  },
+  [SlotKey.Month]: {
+    start: 3,
+    end: 5,
+    max: 12,
+    min: 1
+  },
+  [SlotKey.Year]: {
+    start: 6,
+    end: 10,
+    max: 2100,
+    min: 1900
+  }
+};
+exports.SLOTS_PLACEHOLDER = {
+  'ru-RU': {
+    [SlotKey.Day]: 'ДД',
+    [SlotKey.Month]: 'ММ',
+    [SlotKey.Year]: 'ГГГГ'
+  },
+  'en-US': {
+    [SlotKey.Day]: 'DD',
+    [SlotKey.Month]: 'MM',
+    [SlotKey.Year]: 'YYYY'
+  }
+};

package/dist/cjs/components/FieldDate/hooks/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useDateField"), exports);