@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/components/form/components/InputCombobox/InputCombobox.esm.js

@@ -0,0 +1,169 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import { __rest } from 'tslib';
+import * as React from 'react';
+import { useState, useRef, useLayoutEffect, createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCombobox } from 'downshift';
+import { SelectContainer, SelectBox, OptionWrapper, SelectOption, SelectItem, Input } from '../InputSelect/InputSelect.esm.js';
+import { Portal } from '@majoo-ui/helpers';
+import { InputGroup } from '../InputGroup/InputGroup.esm.js';
+import { InputLeftElement, InputRightElement } from '../InputElement/InputElement.esm.js';
+import { SearchOutline, CloseFilled } from '@majoo-ui/icons';
+import { Popover, PopoverTrigger, PopoverContent } from '../../../popover/Popover.esm.js';
+
+const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      showLeadingIcon = false,
+      showClearIcon = true,
+      disabled,
+      placeholder,
+      readOnly,
+      inputProps,
+      handleInputValue,
+      noStyling,
+      onChange
+    } = _a,
+    props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
+  const inputRef = React.useRef(null);
+  return jsxs(InputGroup, {
+    css: !noStyling && {
+      height: '100%',
+      border: 'none',
+      '&:hover': {
+        border: 'none'
+      }
+    },
+    disabled: disabled,
+    children: [jsx(InputLeftElement, {
+      children: showLeadingIcon && jsx(SearchOutline, {}),
+      css: !showLeadingIcon ? {
+        width: '$spacing-05',
+        padding: 0
+      } : undefined
+    }), jsx(Input, Object.assign({}, inputProps, props, {
+      placeholder: placeholder,
+      readOnly: readOnly,
+      isReadOnly: readOnly,
+      ref: node => {
+        if (forwardedRef) {
+          if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
+        }
+        inputRef.current = node;
+      },
+      disabled: disabled,
+      css: {
+        marginLeft: 0,
+        height: 'fit-content'
+      }
+    })), jsx(InputRightElement, {
+      children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsx(CloseFilled, {}) : jsx("div", {}),
+      onClick: e => {
+        if (!disabled) {
+          inputProps.onChange(Object.assign(Object.assign({}, e), {
+            target: Object.assign(Object.assign({}, e.target), {
+              value: ''
+            })
+          }));
+          if (handleInputValue) handleInputValue('');
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }
+    })]
+  });
+});
+const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      options: items = [],
+      defaultValue,
+      disabled,
+      placeholder = 'Select Item',
+      showLeadingIcon = false,
+      placement = 'bottom',
+      size = 'lg',
+      isInvalid,
+      css,
+      onValueChange
+    } = _a,
+    props = __rest(_a, ["options", "defaultValue", "disabled", "placeholder", "showLeadingIcon", "placement", "size", "isInvalid", "css", "onValueChange"]);
+  const [inputItems, setInputItems] = useState(items);
+  const [openOptions, setOpenOptions] = useState(false);
+  const selectBoxRef = useRef(null);
+  const [optionsWidth, setOptionsWidth] = useState(0);
+  useLayoutEffect(() => {
+    var _a, _b;
+    setOptionsWidth((_b = (_a = selectBoxRef === null || selectBoxRef === void 0 ? void 0 : selectBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
+  }, [selectBoxRef]);
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps
+  } = useCombobox({
+    items: inputItems,
+    defaultInputValue: defaultValue,
+    onInputValueChange: ({
+      inputValue = ''
+    }) => {
+      if (onValueChange) onValueChange(inputValue);
+      setInputItems(items.filter(item => item.toLowerCase().startsWith(inputValue.toLowerCase())));
+    }
+  });
+  return jsx(Popover, {
+    open: openOptions || isOpen,
+    onOpenChange: setOpenOptions,
+    placement: placement,
+    hideOnScroll: true,
+    children: jsxs(SelectContainer, {
+      css: css,
+      ref: selectBoxRef,
+      children: [jsx(PopoverTrigger, {
+        children: jsx(SelectBox, Object.assign({}, getComboboxProps(), {
+          size: size,
+          disabled: disabled,
+          isInvalid: isInvalid,
+          children: jsx(SelectInputSearch, Object.assign({
+            showLeadingIcon: showLeadingIcon,
+            disabled: disabled,
+            placeholder: placeholder,
+            inputProps: getInputProps({}, {
+              suppressRefError: true
+            })
+          }, props, {
+            ref: forwardedRef
+          }))
+        }))
+      }), jsx(Portal, {
+        children: jsx(PopoverContent, {
+          style: {
+            width: optionsWidth
+          },
+          children: inputItems.length > 0 && jsx(OptionWrapper, Object.assign({}, getMenuProps(), {
+            css: {
+              display: isOpen ? 'block' : 'none',
+              pointerEvents: 'auto'
+            },
+            placement: placement,
+            children: jsx(SelectOption, {
+              children: inputItems.map((item, index) => (/*#__PURE__*/createElement(SelectItem, Object.assign({}, getItemProps({
+                item,
+                index
+              }), {
+                key: `${item}${index}`,
+                css: {
+                  backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                  fontWeight: 'normal'
+                }
+              }), item)))
+            })
+          }))
+        })
+      })]
+    })
+  });
+});
+
+export { InputCombobox };

package/components/form/components/InputCounter/InputCounter.esm.js

@@ -0,0 +1,226 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { Button as Button$1 } from '../../../button/Button.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import { styled, colors } from '../../../../config/stitches.config.esm.js';
+import { MinusOutline, PlusOutline } from '@majoo-ui/icons';
+import { InputNumber } from '../InputNumber/InputNumber.esm.js';
+
+const Input = styled(InputNumber, {
+  border: `1px solid $gray150`,
+  borderLeft: 'none',
+  borderRight: 'none',
+  borderRadius: 0,
+  textAlign: 'center',
+  fontSize: 16,
+  fontWeight: 600,
+  color: '$textPrimary',
+  userSelect: 'none',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    border: `1px solid $gray150`,
+    '&:hover': {
+      borderColor: '$gray150'
+    }
+  },
+  variants: {
+    disabledChange: {
+      true: {
+        backgroundColor: '$bgWhite !important',
+        border: `1px solid $gray150`,
+        color: '$textPrimary !important',
+        '&:hover': {
+          borderColor: '$gray150'
+        }
+      }
+    }
+  }
+});
+const Button = styled(Button$1, {
+  border: `1px solid $gray150 !important`,
+  paddingRight: '16px !important',
+  paddingLeft: '16px !important',
+  minWidth: '54px !important',
+  '&:hover': {
+    backgroundColor: '$primary50',
+    border: '1px solid $btnPrimary !important'
+  },
+  '&:active': {
+    backgroundColor: '$primary100',
+    border: '1px solid $btnPrimary !important'
+  },
+  '&:focus': {
+    outline: 0,
+    backgroundColor: '$primary50',
+    border: '1px solid $btnPrimary !important'
+  },
+  '&:disabled': {
+    '&:hover': {
+      borderColor: '$gray150 !important'
+    }
+  },
+  variants: {
+    counterType: {
+      minus: {
+        borderRight: 'none !important',
+        borderTopRightRadius: '0px !important',
+        borderBottomRightRadius: '0px !important',
+        '&:disabled': {
+          border: `1px solid $gray150 !important`
+        }
+      },
+      plus: {
+        borderLeft: 'none !important',
+        borderTopLeftRadius: '0px !important',
+        borderBottomLeftRadius: '0px !important',
+        '&:disabled': {
+          border: `1px solid $gray150 !important`
+        }
+      }
+    },
+    buttonSize: {
+      sm: {
+        height: '32px !important',
+        padding: '4px 16px !important'
+      },
+      md: {
+        height: '36px !important',
+        padding: '4px 16px !important'
+      },
+      lg: {
+        height: '40px !important',
+        padding: '7px 16px !important'
+      }
+    }
+  }
+});
+const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
+  var _a;
+  const {
+    css,
+    value,
+    onChange,
+    allowNegative,
+    min,
+    max,
+    disabled,
+    disabledIncrement,
+    disabledDecrement,
+    prefix,
+    suffix,
+    size,
+    disableManualInput,
+    step = 1,
+    decimalScale
+  } = props;
+  const [inputValue, setInputValue] = useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0);
+  useEffect(() => {
+    if (min && inputValue < min) {
+      setInputValue(min);
+      onChange === null || onChange === void 0 ? void 0 : onChange(min);
+    }
+    if (max && inputValue > max) {
+      setInputValue(max);
+      onChange === null || onChange === void 0 ? void 0 : onChange(max);
+    }
+  }, [inputValue, min, max, onChange]);
+  useEffect(() => {
+    if (value) {
+      setInputValue(value);
+    }
+  }, [value]);
+  /**
+   * Rounds a number to avoid floating-point precision issues.
+   */
+  function roundToDecimalScale(num) {
+    if (decimalScale === undefined) {
+      return Math.round(num);
+    }
+    const factor = Math.pow(10, decimalScale);
+    return Math.round(num * factor) / factor;
+  }
+  function handleUp() {
+    const newValue = roundToDecimalScale(inputValue + step);
+    if (!max || newValue <= max) {
+      setInputValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }
+  }
+  function handleDown() {
+    if (inputValue !== 0 || allowNegative) {
+      const newValue = roundToDecimalScale(inputValue - step);
+      if (!min || newValue >= min) {
+        setInputValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      }
+    }
+  }
+  function handleChange(e) {
+    // Get the raw value and handle locale-specific decimal separator
+    // Indonesian locale uses comma (,) as decimal separator and dot (.) as thousands separator
+    let rawValue = e.target.value;
+    // Remove thousands separators (dots) and replace decimal separator (comma) with dot for parsing
+    rawValue = rawValue.replace(/\./g, '').replace(',', '.');
+    const parsedValue = parseFloat(rawValue);
+    // Only update if we have a valid number
+    if (!isNaN(parsedValue)) {
+      const roundedValue = roundToDecimalScale(parsedValue);
+      setInputValue(roundedValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
+    } else if (rawValue === '' || rawValue === '-') {
+      // Handle empty input or just a negative sign
+      setInputValue(0);
+      onChange === null || onChange === void 0 ? void 0 : onChange(0);
+    }
+  }
+  return jsxs(Flex, {
+    direction: "row",
+    align: "center",
+    css: css,
+    children: [jsx(Button, {
+      type: "button",
+      disabled: disabled || disabledDecrement,
+      buttonType: "secondary",
+      buttonSize: size,
+      counterType: "minus",
+      icon: true,
+      onClick: handleDown,
+      children: jsx(MinusOutline, {
+        size: 24,
+        color: disabled || disabledDecrement ? colors.iconDisable : colors.primary500
+      })
+    }), jsx(Input, {
+      ref: ref,
+      disabled: disabled || disabledIncrement || disabledDecrement || disableManualInput,
+      disabledChange: disabledIncrement || disabledDecrement || disableManualInput,
+      value: inputValue,
+      allowNegative: allowNegative,
+      onChange: handleChange,
+      prefix: prefix,
+      suffix: suffix,
+      size: size,
+      decimalScale: decimalScale,
+      fixedDecimalScale: decimalScale !== undefined
+    }), jsx(Button, {
+      type: "button",
+      disabled: disabled || disabledIncrement,
+      buttonType: "secondary",
+      buttonSize: size,
+      counterType: "plus",
+      icon: true,
+      onClick: handleUp,
+      children: jsx(PlusOutline, {
+        size: 24,
+        color: disabled || disabledIncrement ? colors.iconDisable : colors.primary500
+      })
+    })]
+  });
+});
+InputCounter.defaultProps = {
+  allowNegative: false,
+  disabled: false,
+  size: 'lg',
+  step: 1
+};
+
+export { InputCounter as default };

package/components/form/components/InputCreatable/InputCreatable.esm.js

@@ -0,0 +1,229 @@
+import React__default from 'react';
+import { CirclePlusOutline } from '@majoo-ui/icons';
+import { colors, styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Wrapper = styled('div', {
+  margin: 0,
+  flexDirection: 'column',
+  display: 'block',
+  position: 'relative',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
+  alignItems: 'center',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  color: '$textDisable',
+  width: '100%'
+});
+const InputWrapper = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  width: '100%',
+  margin: '0',
+  appearance: 'none',
+  backgroundolor: 'none',
+  boxSizing: 'border-box',
+  border: '1px solid $bgOutline',
+  borderRadius: '$md',
+  color: '$textPrimary',
+  lineHeight: '$short-content-regular',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  '&:focus-within': {
+    border: '1px solid $formActive'
+  },
+  '&:hover': {
+    border: '1px solid $gray500'
+  },
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: '1px solid $formDefault'
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: 'auto',
+        minheight: 32,
+        padding: '8px 16px'
+      },
+      lg: {
+        height: 'auto',
+        minheight: 40,
+        padding: '8px 16px'
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $formError',
+        '&:focus-within': {
+          border: '1px solid $formError'
+        },
+        '&:hover': {
+          border: '1px solid $formError'
+        }
+      }
+    }
+  }
+});
+const Input = styled('input', {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  appearance: 'none',
+  backgroundolor: 'none',
+  border: 'none',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  cursor: 'text',
+  outline: 'none',
+  letterSpacing: '$short-content-regular',
+  '&:disabled': {
+    backgroundColor: 'transparent',
+    color: '$textDisable',
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    }
+  },
+  variants: {
+    readOnly: {
+      true: {
+        color: '$textPrimary',
+        backgroundColor: '$formDisable',
+        cursor: 'not-allowed'
+      }
+    }
+  }
+});
+const OptionWrapper = styled('div', {
+  display: 'none',
+  overflow: 'auto',
+  padding: '4px 16px',
+  zIndex: 1,
+  borderRadius: '$sm',
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 2px 12px #00000014',
+  width: '100%',
+  maxHeight: '36px',
+  position: 'absolute',
+  float: 'left',
+  top: '45px',
+  left: '0'
+});
+const ItemWrapper = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  alignItems: 'center',
+  marginLeft: '10px',
+  fontSize: '$content-button',
+  fontWeight: 600,
+  color: '$textBrand',
+  height: '100%'
+});
+const Item = styled('div', {
+  backgroundColor: '$bgWhite',
+  cursor: 'pointer',
+  lineHeight: '20px'
+});
+function InputCreatable({
+  size,
+  isInvalid,
+  placeholder,
+  onChange,
+  value,
+  disabled,
+  readOnly,
+  maxChar,
+  onClickItem
+}) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputCreatable', 'translation']);
+  const [inputValue, setInputValue] = React__default.useState(value || '');
+  const [isOpen, setOpen] = React__default.useState(false);
+  React__default.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  React__default.useEffect(() => {
+    onChange && onChange(inputValue);
+  }, [inputValue]);
+  const handleInputValue = value => {
+    if (value === '') {
+      setInputValue('');
+      setOpen(false);
+    } else {
+      setOpen(true);
+      setInputValue(value);
+    }
+  };
+  return /*#__PURE__*/jsxs(Wrapper, {
+    children: [/*#__PURE__*/jsx(InputWrapper, {
+      size: size,
+      isInvalid: isInvalid,
+      disabled: disabled || readOnly,
+      children: /*#__PURE__*/jsx(Input, {
+        type: "text",
+        placeholder: placeholder,
+        disabled: disabled,
+        readOnly: readOnly,
+        maxLength: maxChar,
+        value: inputValue,
+        onChange: event => handleInputValue(event.target.value)
+      })
+    }), /*#__PURE__*/jsx(OptionWrapper, {
+      css: {
+        display: isOpen ? 'block' : 'none'
+      },
+      children: /*#__PURE__*/jsxs(ItemWrapper, {
+        children: [/*#__PURE__*/jsx(CirclePlusOutline, {
+          color: colors.iconBrand
+        }), /*#__PURE__*/jsxs(Item, {
+          onClick: () => {
+            if (onClickItem) onClickItem();
+            setOpen(false);
+          },
+          children: [t('addText', 'Tambah'), " \"", inputValue, "\""]
+        })]
+      })
+    })]
+  });
+}
+InputCreatable.propTypes = {
+  placeholder: PropTypes.string,
+  size: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onClickItem: PropTypes.func,
+  maxChar: PropTypes.number,
+  isInvalid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool
+};
+InputCreatable.defaultProps = {
+  placeholder: 'Placeholder',
+  size: 'lg',
+  isInvalid: false,
+  disabled: false,
+  readOnly: false,
+  value: ''
+};
+
+export { InputCreatable, InputCreatable as default };

package/components/form/components/InputDateRange/InputDateRange.esm.js

@@ -0,0 +1,46 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { InputSelect } from '../InputSelect/InputSelect.esm.js';
+import { useTranslation } from 'react-i18next';
+import { advancePickerDate, advancePickerOptionsId, advancePickerOptionsEn } from '../../../datePicker/state/reducer.esm.js';
+
+const InputDateRange = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      onChange,
+      placeholder,
+      size = 'sm',
+      disabled = false,
+      placement = 'bottom',
+      readOnly = false,
+      isInvalid = false,
+      css
+    } = _a,
+    props = __rest(_a, ["onChange", "placeholder", "size", "disabled", "placement", "readOnly", "isInvalid", "css"]);
+  const {
+    t,
+    i18n
+  } = useTranslation('translation');
+  const language = i18n.language;
+  const pickerOptions = language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn;
+  return jsx(InputSelect, Object.assign({}, props, {
+    option: pickerOptions.map(option => ({
+      name: option.label,
+      value: option.value
+    })),
+    onChange: selectedOption => {
+      if (onChange) onChange(advancePickerDate(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, undefined));
+    },
+    placeholder: placeholder || t('placeholder.select', 'Pilih'),
+    size: size,
+    disabled: disabled,
+    placement: placement,
+    readOnly: readOnly,
+    isInvalid: isInvalid,
+    css: css
+  }));
+});
+
+export { InputDateRange, InputDateRange as default };

package/components/form/components/InputElement/InputElement.esm.js

@@ -0,0 +1,35 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { InputPrefix, InputSuffix } from '../InputLetter/InputLetter.esm.js';
+
+const InputLeftElement = styled(InputPrefix, {
+  paddingRight: 8
+});
+InputLeftElement.defaultProps = {
+  as: 'div',
+  color: 'primary',
+  size: 'lg'
+};
+InputLeftElement.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
+  color: PropTypes.string,
+  size: PropTypes.string
+};
+InputLeftElement.name = 'InputLeftElement';
+const InputRightElement = styled(InputSuffix, {
+  paddingLeft: 8
+});
+InputRightElement.defaultProps = {
+  as: 'div',
+  color: 'primary',
+  size: 'lg'
+};
+InputRightElement.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
+  color: PropTypes.string,
+  size: PropTypes.string
+};
+InputRightElement.name = 'InputRightElement';
+
+export { InputLeftElement, InputRightElement };