@snmt-react-ui/user-select 1.1.0

package/README.md

@@ -0,0 +1 @@
+## UserSelect

package/dist/UserSelect.d.ts

@@ -0,0 +1,46 @@
+import { MultiSelectProps, SingleSelectProps } from '@snmt-react-ui/select';
+import { EMPLOYMENT_STATUS, PRODUCTION_STATUS, SORT_OPTION, USER_STATUS } from './constants';
+
+export type UserSelectProps = (Omit<SingleSelectProps, 'options'> | Omit<MultiSelectProps, 'options'>) & {
+    fetchParams?: {
+        filters?: {
+            id?: string[];
+            managerId?: string[];
+            resourceManagerId?: string[];
+            employmentStatus?: EMPLOYMENT_STATUS[];
+            productionStatus?: PRODUCTION_STATUS[];
+            createdAt?: string[];
+            status?: USER_STATUS[];
+        };
+        include?: ('permissions' | 'managers' | 'resource_manager')[];
+        sort?: {
+            field: string;
+            order: SORT_OPTION;
+        }[];
+        searchFields?: string[] | undefined;
+        deleted?: boolean;
+        filtersOr?: {
+            isAdmin?: boolean;
+            isManager?: boolean;
+            isResourceManager?: boolean;
+            isSuperManager?: boolean;
+            isNoRole?: boolean;
+        };
+    };
+    /** Function for handling errors while fetching data */
+    onError?: (error: {
+        status: number;
+        message?: string;
+    }) => void;
+};
+/**
+ * This is UserSelect. It is a customizable and asynchronous select component designed to fetch and display user data
+ * from a backend API. The component supports both single and multiple selection modes, allowing users to search,
+ * select, and manage user entries efficiently. It integrates with the People API to fetch user data based on
+ * customizable filters, sorting, and search parameters.
+ *
+ * A key feature of this component is that it fetches each selected option separately to ensure that selected items
+ * are always displayed with the correct label, even if they are not present in the initially fetched options.
+ */
+declare const UserSelect: import('react').ForwardRefExoticComponent<UserSelectProps & import('react').RefAttributes<any>>;
+export { UserSelect };

package/dist/UserSelect.stories.d.ts

@@ -0,0 +1,6 @@
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./UserSelect').UserSelectProps & import('react').RefAttributes<any>>;
+};
+export default meta;
+export declare const UserSelectExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/constants/index.d.ts

@@ -0,0 +1,21 @@
+export declare enum EMPLOYMENT_STATUS {
+    FULL_TIME = "Full-Time",
+    PART_TIME = "Part-Time",
+    OUT_STAFFED = "Out-Staffed",
+    NON_EMPLOYEE = "Non-Employee",
+    SUB_CONTRACTOR = "Sub-Contractor"
+}
+export declare enum PRODUCTION_STATUS {
+    NON_PRODUCTION = "Non-Production",
+    PRE_PRODUCTION = "Pre-Production",
+    PRODUCTION = "Production",
+    TRAINEE = "Trainee"
+}
+export declare enum USER_STATUS {
+    ACTIVE = "Active",
+    ARCHIVED = "Archived"
+}
+export declare enum SORT_OPTION {
+    ASC = "asc",
+    DESC = "desc"
+}

package/dist/index.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";.snmt-flex.inherit{flex-wrap:inherit}.snmt-avatar.ant-avatar{border:0;background-color:var(--grey-dark-5);color:var(--grey-light-0);font-family:Montserrat,sans-serif}.snmt-avatar.image.ant-avatar{background-color:transparent}.snmt-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner:after{height:2px;background-color:var(--grey-light-0)}.snmt-checkbox .ant-checkbox+span{padding-inline-start:12px;padding-inline-end:unset;font-family:Montserrat,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;text-align:left}:not(.ant-checkbox-indeterminate).ant-checkbox-checked .ant-checkbox-inner:after{transform:rotate(45deg) scale(1) translate(-40%,-60%)}.ant-checkbox-inner{width:20px!important;height:20px!important}.ant-checkbox-checked .ant-checkbox-inner,.snmt-checkbox-light.ant-checkbox-checked .ant-checkbox-inner:hover{background-color:var(--blue-primary);border-color:var(--blue-primary)}.snmt-checkbox-light:not(.ant-checkbox-checked):hover .ant-checkbox-inner{border:1px solid var(--grey-dark-1)}.snmt-checkbox-light+span{color:var(--grey-light-0)}.snmt-checkbox-dark .ant-checkbox:not(.ant-checkbox-checked) .ant-checkbox-inner{background-color:var(--grey-dark-4);border:1px solid var(--grey-dark-4)}.snmt-checkbox-dark .ant-checkbox:not(.ant-checkbox-checked):hover .ant-checkbox-inner{background-color:var(--grey-dark-3);border:1px solid var(--grey-dark-3)}.snmt-checkbox-dark .ant-checkbox+span{color:var(--grey-light-0)}.snmt-tag{display:flex;align-items:center;justify-content:center;border-radius:4px;border:none;margin-inline-end:0;padding:2px 6px;height:20px;background:var(--grey-light-2)}.snmt-tag .ant-tag-close-icon{display:flex;align-items:center;margin-inline-start:6px}.snmt-tag .ant-tag-close-icon:hover>path{fill:var(--blue-primary);transition:fill .2s ease-in-out}.snmt-tag.medium{padding:4px 8px;height:28px}.snmt-tag.medium .ant-tag-close-icon{margin-inline-start:7.75px}.clickable{cursor:pointer}:root{--grey-light-0: #ffffff;--grey-light-1: #fbfbfb;--grey-light-2: #f4f4f5;--grey-light-3: #e6e6e9;--grey-light-4: #d0d0d7;--grey-dark-1: #babac4;--grey-dark-2: #8b8b9d;--grey-dark-3: #6f6f83;--grey-dark-4: #35353f;--grey-dark-5: #131314;--blue-primary: #004ed7;--blue-hover: #003899;--blue-light-1: #ebf2ff;--blue-light-2: #deeaff;--blue-light-3: #c3d9ff;--blue-light-4: #a5c6ff;--blue-dark-1: #498bff;--purple-light: #f2e5ff;--purple-dark: #6900d1;--notification-warning-light: #fff4e8;--notification-warning-dark: #d17100;--notification-success-light: #e0ffdb;--notification-success-dark: #0f6e00;--notification-error-light: #ffecec;--notification-error-dark: #d20000;--notification-error-dark-mode: #e50f00}.snmt-typography.ant-typography{color:var(--blue-dark-3);font-family:Montserrat,sans-serif;font-style:normal;font-feature-settings:"clig" off,"liga" off;line-height:normal;margin:0!important}.snmt-typography.snmt-typography-h1{font-size:29px;font-weight:700;line-height:110%}.snmt-typography.snmt-typography-h2{font-size:25px;font-weight:600;line-height:120%}.snmt-typography.snmt-typography-h3{font-size:21px;font-weight:600;line-height:116%}.snmt-typography.snmt-typography-h4{font-size:19px;font-weight:600;line-height:124%}.snmt-typography.snmt-typography-h5{font-size:16px;font-weight:600;line-height:124%}.snmt-typography.snmt-typography-body1{font-size:16px;font-weight:500;line-height:144%}.snmt-typography.snmt-typography-body2{font-size:14px;font-weight:500;line-height:144%}.snmt-typography.snmt-typography-body3{font-size:12px;font-weight:600;line-height:120%}.snmt-typography.snmt-typography-body4{font-size:12px;font-weight:500;line-height:120%}.snmt-typography.snmt-typography-caption{font-size:10px;font-weight:500;line-height:120%}.snmt-typography.snmt-typography-button{font-size:14px;font-weight:600;line-height:116%}.snmt-typography.snmt-typography-tag{font-size:9px;font-weight:500;line-height:116%}.snmt-typography.snmt-typography-link{font-size:16px;font-weight:500;line-height:120%;text-decoration:underline;cursor:pointer}.snmt-typography.snmt-typography-align-center{text-align:center}.snmt-typography.snmt-typography-align-justify{text-align:justify}.snmt-typography.snmt-typography-align-left{text-align:left}.snmt-typography.snmt-typography-align-right{text-align:right}.snmt-typography.collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-button{width:fit-content;display:flex;align-items:center;border:none;margin-inline-end:3px;padding:2px 6px;height:20px;cursor:pointer;background:var(--grey-light-2)}.overflow-button:hover{background:var(--blue-light-1)}.overflow-button.open{background:var(--blue-light-2)}.snmt-popover .ant-popover-inner{padding:0}.snmt-popover.padding .ant-popover-inner{padding:16px}.snmt-select{width:100%;position:relative}.snmt-select .snmt-select-blank .ant-select-selector{border:none!important}.snmt-select .ant-select{height:100%;pointer-events:none;width:100%;border-radius:8px}.snmt-select .ant-select .wrapper-suffix-icon{pointer-events:none;display:flex;align-items:center;gap:10px}.snmt-select .ant-select-focused .ant-select-selector{box-shadow:none!important}.snmt-select .ant-select-selector{pointer-events:all;border:1px solid var(--grey-light-4)!important;border-radius:8px!important;height:100%!important;padding:8px 16px!important}.snmt-select .ant-select-selector:hover{border-color:var(--blue-dark-1)!important}.snmt-select .ant-select-selection-placeholder{font-size:16px!important;font-weight:500;color:var(--grey-dark-2);font-family:Montserrat,sans-serif;text-align:left!important}.snmt-select .ant-select-selection-search{margin-inline-start:0px!important;font-size:16px;font-weight:500}.snmt-select .ant-select-selection-search input{font-size:16px!important;font-weight:500!important;color:var(--grey-dark-5)!important}.snmt-select .ant-select-arrow div{pointer-events:all;position:relative;z-index:10}.snmt-select .ant-select-selection-overflow-item-rest .ant-tag-close-icon{display:none}.snmt-select .ant-select-disabled .ant-select-arrow div{pointer-events:none!important;cursor:not-allowed!important}.snmt-select .ant-select-single .ant-select-selection-item{font-family:Montserrat,sans-serif;font-weight:500;color:var(--grey-dark-5);font-size:16px}.snmt-select .ant-select-single .ant-select-selection-item img{display:none}.snmt-select .ant-select-multiple .ant-select-selector{padding:9px 48px 9px 16px!important}.snmt-select .ant-select-multiple .ant-select-selection-placeholder{inset-inline-start:0px;inset-inline-end:16px}.snmt-select .ant-select-multiple .ant-select-selection-item{background-color:var(--grey-light-2)}.snmt-select .ant-select-multiple .ant-select-selection-item-content{font-family:Montserrat,sans-serif;color:var(--grey-dark-5);font-weight:500;font-size:12px;margin-inline-end:6px}.snmt-select .ant-select-multiple .ant-select-selection-item-content img{display:none}.snmt-select .ant-select-multiple .ant-select-selection-overflow-item .tag-wrapper{margin:0 3px}.snmt-select .ant-select-multiple .ant-select-selection-overflow-item-rest .ant-select-selection-item{margin-inline-start:3px;margin-inline-end:0;margin-block:0;padding-inline-start:0;padding-inline-end:0;height:22px;background:transparent}.snmt-select .ant-select-multiple .ant-select-selection-overflow-item-rest .ant-select-selection-item-content{margin:0}.snmt-select .ant-select-multiple .ant-select-selection-overflow-item:first-of-type .tag-wrapper{margin-left:0;margin-right:3px}.snmt-select .ant-select-multiple .ant-select-selection-overflow .custom-placeholder{position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;font-size:16px;font-weight:500;color:var(--grey-dark-2);font-family:Montserrat,sans-serif;text-align:left}.snmt-select .ant-select-open .ant-select-selector{box-shadow:none!important;border-color:var(--blue-primary)!important}.snmt-select .select-arrow{transition:transform .3s ease;position:relative;z-index:2}.snmt-select .select-arrow-rotated{transition:transform .3s ease;transform:rotate(180deg)}.snmt-select fieldset{position:absolute;min-width:0;margin:0;padding:0 11px;top:-6px;right:0;bottom:0;left:0;border:1px solid;border-color:var(--grey-light-4);border-radius:8px;text-align:left;pointer-events:none}.snmt-select fieldset>legend{max-width:0;height:14px;padding:0;font-size:12px}.snmt-select fieldset>legend>span{padding:0 5px;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.snmt-select-focused{border-color:var(--blue-primary)!important;border-width:2px}.snmt-select:not(.ant-select-disabled):not(.snmt-select-error):not(.snmt-select-focused):hover fieldset{border-color:var(--blue-dark-1)!important;color:var(--blue-dark-1)!important;box-shadow:none!important}.ant-select-dropdown{padding:0}.ant-select-dropdown .ant-select-item{border-radius:0}.ant-select-dropdown .ant-select-item-option{padding:14px 16px}.ant-select-dropdown .ant-select-item-option-state{display:none}.ant-select-dropdown .ant-select-item-option-active{background-color:var(--blue-light-1)!important}.ant-select-dropdown .ant-select-item-option-disabled .ant-select-item-option-content span{color:var(--grey-light-4)!important}.ant-select-dropdown .ant-select-item-option-disabled .ant-select-item-option-content img{filter:opacity(.5)}.ant-select-dropdown .ant-select-item-option-content span{font-family:Montserrat,sans-serif;color:var(--grey-dark-5);font-weight:500}.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled){background-color:transparent}.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-content span{font-weight:500!important}.ant-select-dropdown .rc-virtual-list-holder{overflow-y:auto!important}.ant-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar{width:6px}.ant-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-thumb{background:var(--grey-light-4);border-radius:10px}.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector{background:var(--grey-light-2);border:none!important}.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item{color:var(--grey-dark-1)!important}.rc-virtual-list-scrollbar.rc-virtual-list-scrollbar-vertical{visibility:hidden!important}.snmt-select-single .ant-select-item-option-state{display:block}.fieldset-focused>legend,.fieldset-disabled>legend,.fieldset-filled>legend{max-width:100%!important}.fieldset-focused>legend>span,.fieldset-disabled>legend>span,.fieldset-filled>legend>span{opacity:1!important}.fieldset-focused{border-color:var(--blue-primary)!important;color:var(--blue-primary)!important;border-width:2px!important}.fieldset-disabled{border:none!important;color:var(--grey-dark-1)}.fieldset-filled{border-color:var(--grey-light-4);color:var(--grey-light-4)}.snmt-loader{display:inline-block;aspect-ratio:1;animation:loader 1s infinite linear}@keyframes loader{33%{background-position:0% 50%,50% 100%,100% 100%}50%{background-position:0% 0%,50% 50%,100% 100%}66%{background-position:0% 0%,50% 0%,100% 50%}to{background-position:0% 0%,50% 0%,100% 0%}}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { UserSelect } from './UserSelect';

package/dist/translations/en.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    "archived": "Archived",
+    "deleted": "Deleted"
+}
+;
+
+export default _default;

package/dist/translations/ru.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    "archived": "Заархивирован",
+    "deleted": "Удалён"
+}
+;
+
+export default _default;