@hexure/ui 1.9.2 → 1.9.4

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ var React = require('react');
 var Icon = require('@mdi/react');
 var js = require('@mdi/js');
 var Numeral = require('numeral');
-require('moment');
+var Moment = require('moment');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2085,6 +2085,9 @@ const StyledButton = styled.button `
   border-style: solid;
   border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
   box-sizing: border-box;
+
+  &:active,
+  &:focus,
   &:hover {
     opacity: ${props => (props.$disabled ? 0.6 : 1)};
   }
@@ -2481,14 +2484,21 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
 };
 
 const Wrapper$d = styled.label `
-  padding: 4px 0;
+  border-radius: 4px;
+  padding: 4px 0px 4px 6px;
+  margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
   align-items: flex-start;
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6em;
   box-sizing: border-box;
+
+  &:focus-within {
+    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
+  }
 `;
+Wrapper$d.defaultProps = { theme: EditableTheme };
 const Input$2 = styled.input `
   font-size: 20px;
   margin: 5px 0px 0px 0px;
@@ -2891,7 +2901,12 @@ const Wrapper$c = styled.div `
   display: flex;
   align-items: center;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
+Wrapper$c.defaultProps = { theme: EditableTheme };
 const Trigger$1 = styled.select `
   appearance: none;
   box-shadow: none;
@@ -3415,6 +3430,53 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
                     message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
 };
 
+const getAgesFromDob = (dob) => {
+    let calculated_current_age = null;
+    let calculated_nearest_age = null;
+    if (dob) {
+        // Note: Moment accounts for leap years automatically
+        const birth_date_this_year = Moment(dob).year(Moment().year());
+        const next_birth_date = Moment().isBefore(birth_date_this_year)
+            ? birth_date_this_year
+            : birth_date_this_year.add(1, 'years');
+        calculated_current_age = Moment().diff(dob, 'years');
+        calculated_nearest_age = next_birth_date.isBefore(Moment().add(6, 'months'))
+            ? calculated_current_age + 1
+            : calculated_current_age;
+    }
+    return { calculated_nearest_age, calculated_current_age };
+};
+const getDaysForMonth = (month) => {
+    const days = [];
+    let max_days = 31;
+    let i = 1;
+    if ([4, 6, 9, 11].includes(month)) {
+        max_days = 30;
+    }
+    if (month === 2) {
+        max_days = 29;
+    }
+    for (i; i <= max_days; i++) {
+        days.push({ value: i });
+    }
+    return days;
+};
+const getYears = () => {
+    const years = [];
+    let i = 1916;
+    for (i; i < 2021; i++) {
+        years.push({ value: i });
+    }
+    return years;
+};
+const validateEmail = (email) => {
+    const email_pattern = new RegExp(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/);
+    return email_pattern.test(email);
+};
+const validatePhone = (phone) => {
+    const number_pattern = new RegExp(/^[2-9]\d{9}$/);
+    return number_pattern.test(phone);
+};
 const formatAsPhone = (number) => {
     let formatted_value = `${number}`.replace(/[^0-9.]/g, '');
     const size = formatted_value.length;
@@ -4078,14 +4140,21 @@ const Pagination = (_a) => {
 };
 
 const Wrapper$2 = styled.label `
-  padding: 4px 0;
+  border-radius: 4px;
+  padding: 4px 0px 4px 6px;
+  margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
   align-items: center;
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6rm;
   box-sizing: border-box;
+
+  &:focus-within {
+    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
+  }
 `;
+Wrapper$2.defaultProps = { theme: EditableTheme };
 const Input = styled.input `
   font-size: 20px;
   margin: 0px 0px 2px 0px;
@@ -4328,12 +4397,16 @@ exports.Button = Button;
 exports.ButtonMenu = ButtonMenu;
 exports.Checkbox = Checkbox;
 exports.Checklist = Checklist;
+exports.Colors = Colors;
 exports.Copy = Copy;
 exports.DatePicker = DatePicker;
 exports.Drawer = Drawer;
+exports.EditableTheme = EditableTheme;
 exports.Field = Field;
 exports.FieldGroup = FieldGroup;
 exports.FileUpload = FileUpload;
+exports.FontSizes = FontSizes;
+exports.FontStyles = FontStyles;
 exports.Heading = Heading;
 exports.Input = Input$1;
 exports.Link = Link;
@@ -4354,4 +4427,11 @@ exports.Tag = Tag;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.ZeroState = ZeroState;
+exports.formatAsPhone = formatAsPhone;
+exports.formatAsSsn = formatAsSsn;
+exports.getAgesFromDob = getAgesFromDob;
+exports.getDaysForMonth = getDaysForMonth;
+exports.getYears = getYears;
+exports.validateEmail = validateEmail;
+exports.validatePhone = validatePhone;
 //# sourceMappingURL=index.js.map