@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/index-4d393920.js

@@ -0,0 +1,191 @@
+'use strict';
+
+var React = require('react');
+var core = require('@mantine/core');
+var theme = require('./theme-30426d81.js');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledDropdown = styled__default["default"].div `
+  --dropdown-padding: 12px 18px 12px 16px;
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid ${theme.theme.colors.gray200};
+  background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
+    no-repeat;
+  background-position: right 16px center;
+  border-radius: ${theme.theme.borderRadius};
+
+  &[data-disabled='true'],
+  :disabled {
+    background-color: #f2f2f2;
+    cursor: not-allowed;
+  }
+
+  &[data-size='sm'] {
+    font-size: 13px;
+    line-height: 20px;
+  }
+  &[data-size='md'] {
+    font-size: 14px;
+    line-height: 21px;
+  }
+  &[data-size='lg'] {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &[data-has-icons='true'] {
+    border: none;
+    background: ${theme.theme.colors.gray100};
+
+    img,
+    svg {
+      display: inline-block;
+      max-width: 16px;
+      margin-right: 6px;
+    }
+
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      box-shadow: none;
+    }
+    > div {
+      position: relative;
+      display: flex;
+      width: 100%;
+      box-sizing: border-box;
+      align-items: center;
+    }
+    > div::after {
+      position: absolute;
+      top: 50%;
+      right: 12px;
+      width: 10px;
+      height: 8px;
+      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      background-repeat: no-repeat;
+      content: '';
+      transform: translateY(-50%);
+    }
+  }
+
+  &:hover {
+    box-shadow: 0 0 2px 2px ${(props) => props.shadowColor};
+  }
+
+  &[data-is-native='true'] {
+    padding: var(--dropdown-padding);
+    line-height: 24px;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px ${(props) => props.shadowColor};
+    }
+  }
+`;
+const StyledDropdownName = styled__default["default"].div `
+  padding: var(--dropdown-padding);
+  cursor: pointer;
+
+  &.with-label {
+    padding-top: 34px;
+    padding-bottom: 12px;
+  }
+  &[data-dropdown-open] {
+    padding: 11px 15px 11px 15px;
+    border: 1px solid ${(props) => props.color};
+    border-radius: ${theme.theme.borderRadius};
+    box-shadow: 0 0 2px 2px ${(props) => props.shadowColor};
+  }
+`;
+const StyledDropdownList = styled__default["default"].ul `
+  position: absolute;
+  top: 100%;
+  /* right: 0; */
+  min-width: 100%;
+  left: 0;
+  display: block;
+  margin-top: 4px;
+  background: ${theme.theme.colors.white};
+  border-radius: ${theme.theme.borderRadius};
+  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
+    -2px 2px 5px rgba(67, 86, 100, 0.123689);
+  cursor: pointer;
+
+  &[data-has-icons='true'] {
+    border: 1px solid ${theme.theme.colors.gray200};
+    background: white;
+    box-shadow: none;
+    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
+  }
+`;
+const StyledDropdownOption = styled__default["default"].li `
+  display: flex;
+  padding: 12px 18px 12px 16px;
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    color: #bfbfbf;
+    & > * {
+      pointer-events: none;
+    }
+  }
+  &:hover,
+  :active {
+    background: ${theme.theme.colors.gray100};
+  }
+`;
+const StyledIcon = styled__default["default"].div `
+  max-width: 16px;
+  margin-right: 8px;
+`;
+const StyledDropdownLabel = styled__default["default"].div `
+  position: absolute;
+  top: 12px;
+  left: 16px;
+  pointer-events: none;
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Dropdown = ({ className, value, options, onChange = () => undefined, id, placeholderIcon, placeholder, style, size = 'lg', groupedWithLabel, disabled, dropdownLabelTrackingAttributes = {}, isNativeSelect = false, }) => {
+    const _theme = core.useMantineTheme();
+    const [isDropdownOpen, setIsDropdownOpen] = React__default["default"].useState(false);
+    const showDropdown = () => !disabled && setIsDropdownOpen(!isDropdownOpen);
+    if (isNativeSelect) {
+        const finalValue = typeof (value === null || value === void 0 ? void 0 : value.value) === 'object' && value.value instanceof Date
+            ? value.value.toString()
+            : value === null || value === void 0 ? void 0 : value.value;
+        return (
+        // @ts-ignore
+        React__default["default"].createElement(StyledDropdown, { color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][2], as: "select", "data-is-native": "true", value: finalValue || undefined, disabled: disabled, onChange: (e) => {
+                if (typeof e.target.value === 'string') {
+                    const option = options.find((o) => o.value === e.target.value);
+                    if (option) {
+                        onChange(option);
+                    }
+                }
+            } },
+            placeholder && (React__default["default"].createElement("option", { value: placeholder, disabled: true, selected: true }, placeholder)),
+            options.map((option) => (React__default["default"].createElement("option", { key: `${id}-${option.value}`, value: option.value, disabled: option.disabled ? option.disabled : false }, option.label)))));
+    }
+    return (React__default["default"].createElement(StyledDropdown, { color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][2], className: className, "data-dropdown-open": isDropdownOpen || undefined, "data-size": size, id: id, "data-has-icons": !!placeholderIcon, style: style, onBlur: () => setIsDropdownOpen(false), tabIndex: 0, "data-disabled": disabled },
+        !!groupedWithLabel && (React__default["default"].createElement(StyledDropdownLabel, null, groupedWithLabel)),
+        React__default["default"].createElement(StyledDropdownName, Object.assign({ color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][2], onClick: showDropdown, className: groupedWithLabel && 'with-label' }, dropdownLabelTrackingAttributes),
+            placeholderIcon,
+            ' ',
+            React__default["default"].createElement("span", null, value && value.value ? value.label : placeholder)),
+        isDropdownOpen && (React__default["default"].createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": !!placeholderIcon }, options.map((option) => (React__default["default"].createElement(StyledDropdownOption, { key: `${id}-${option.value}`, "data-selected": (value && value.value === option.value) || undefined, onClick: () => !option.disabled && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option)), "data-disabled": option.disabled ? option.disabled : false },
+            option.icon && React__default["default"].createElement(StyledIcon, null, option.icon),
+            option.label)))))));
+};
+
+exports.Dropdown = Dropdown;

package/build/index-51cda470.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var dates = require('@mantine/dates');
+var index$1 = require('./index-69a38997.js');
+var Subot = require('./Subot-cc39f8f4.js');
+var index$2 = require('./index-bef45e43.js');
+var index = require('./index-95dd817d.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// Omit<MantineDatePickerInputProps, 'value'>
+const DatePicker = (_a) => {
+    var _b;
+    var { value, fullWidth = true } = _a, rest = tslib_es6.__rest(_a, ["value", "fullWidth"]);
+    return (React__default["default"].createElement(dates.DatePickerInput, Object.assign({ locale: index.MAPPED_LOCALE[process.env.UNIFY_LOCALE || Subot.LOCALE.Vietnam], valueFormat: (_b = index$1.ISO_FORMAT[process.env.UNIFY_LOCALE || Subot.LOCALE.Vietnam]) === null || _b === void 0 ? void 0 : _b.dateFormat, size: "md", clearable: false, popoverProps: fullWidth
+            ? {
+                styles: {
+                    dropdown: {
+                        minWidth: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    },
+                },
+            }
+            : {}, styles: {
+            root: {
+                position: 'relative',
+            },
+            rightSection: { pointerEvents: 'none', cursor: 'default' },
+        }, rightSection: React__default["default"].createElement(core.Image, { src: index$2.CommonGAssets.getAssetPath(rest.isMB ? 'MB-calendar.svg' : 'OutlineCalendar.svg'), width: 16, height: 16 }), value: value }, rest, { className: `input-control ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` })));
+};
+
+exports.DatePicker = DatePicker;

package/build/index-5e3660ec.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const CustomReferenceDot = React.forwardRef(function CustomReferenceDot(props, ref) {
+    return (React__default["default"].createElement("circle", Object.assign({}, props, { ref: ref }),
+        React__default["default"].createElement("animate", { attributeName: "r", values: "4;8;4", dur: "2s", begin: "0s", repeatCount: "indefinite" })));
+});
+
+exports.CustomReferenceDot = CustomReferenceDot;