@hexure/ui 1.9.2 → 1.9.4

package/dist/cjs/types/index.d.ts

@@ -32,3 +32,6 @@ export { default as Tag } from './components/Tag';
 export { default as Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
 export { default as ZeroState } from './components/ZeroState';
+export * from './utils/Accessibility';
+export * from './utils/Form';
+export * from './Theme';

package/dist/esm/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useDebugValue, useContext, createElement, useState, useE
 import Icon, { Icon as Icon$1 } from '@mdi/react';
 import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiDotsHorizontal, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronRight, mdiChevronLeft, mdiCheck } from '@mdi/js';
 import Numeral from 'numeral';
-import 'moment';
+import Moment from 'moment';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2083,6 +2083,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)};
   }
@@ -2479,14 +2482,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;
@@ -2889,7 +2899,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;
@@ -3413,6 +3428,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;
@@ -4076,14 +4138,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;
@@ -4318,5 +4387,5 @@ const ZeroState = (_a) => {
         action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
 };
 
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FieldGroup, FileUpload, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
 //# sourceMappingURL=index.js.map