diginet-core-ui 1.3.36 → 1.3.38

package/components/form-control/time-picker/index.js

@@ -9,6 +9,10 @@ import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
 import { typography } from '../../../styles/typography';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 
 const formatDimension = x => {
   const regexPercent = /^\d+%$/;
@@ -137,331 +141,332 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const styles = {
     container: {
       outlined: css`
-				* {
-					box-sizing: border-box;
-				}
-				margin: 0;
-				padding: 0;
-				&.disabled {
-					.${IDs.label} {
-						color: ${theme.colors.disabled} !important;
-						pointer-events: none;
-						user-select: none;
-					}
-					#${IDs.inputTypeText} {
-						pointer-events: none;
-						user-select: none;
-						::placeholder {
-							color: ${theme.colors.input};
-						}
-					}
-					.${IDs.icon}.svg-default {
-						color: ${theme.colors.disabled} !important;
-						pointer-events: none;
-						user-select: none;
-					}
-					.${IDs.main} {
-						background-color: ${theme.colors.dark12};
-						pointer-events: none;
-						::before {
-							border-color: ${theme.colors.disabled} !important;
-						}
-					}
-				}
-			`,
+                        * {
+                            box-sizing: border-box;
+                        }
+                        margin: 0;
+                        padding: 0;
+                        &.disabled {
+                            .${IDs.label} {
+                                color: ${theme.colors.disabled} !important;
+                                pointer-events: none;
+                                user-select: none;
+                            }
+                            #${IDs.inputTypeText} {
+                                pointer-events: none;
+                                user-select: none;
+                                ::placeholder {
+                                    color: ${theme.colors.input};
+                                }
+                            }
+                            .${IDs.icon}.svg-default {
+                                color: ${theme.colors.disabled} !important;
+                                pointer-events: none;
+                                user-select: none;
+                            }
+                            .${IDs.main} {
+                                background-color: ${theme.colors.dark12};
+                                pointer-events: none;
+                                ::before {
+                                    border-color: ${theme.colors.disabled} !important;
+                                }
+                            }
+                        }
+                    `,
       underlined: css`
-				* {
-					box-sizing: border-box;
-				}
-				margin: 0;
-				padding: 0;
-				&.disabled {
-					.${IDs.label} {
-						color: ${theme.colors.disabled} !important;
-						pointer-events: none;
-						user-select: none;
-					}
-					#${IDs.inputTypeText} {
-						pointer-events: none;
-						user-select: none;
-						::placeholder {
-							color: ${theme.colors.input};
-						}
-					}
-					.${IDs.icon}.svg-default {
-						color: ${theme.colors.disabled} !important;
-						pointer-events: none;
-						user-select: none;
-					}
-					.${IDs.main} {
-						pointer-events: none;
-						::after, ::before {
-							border-color: ${theme.colors.disabled} !important;
-						}
-					}
-				}
-			`
+                        * {
+                            box-sizing: border-box;
+                        }
+                        margin: 0;
+                        padding: 0;
+                        &.disabled {
+                            .${IDs.label} {
+                                color: ${theme.colors.disabled} !important;
+                                pointer-events: none;
+                                user-select: none;
+                            }
+                            #${IDs.inputTypeText} {
+                                pointer-events: none;
+                                user-select: none;
+                                ::placeholder {
+                                    color: ${theme.colors.input};
+                                }
+                            }
+                            .${IDs.icon}.svg-default {
+                                color: ${theme.colors.disabled} !important;
+                                pointer-events: none;
+                                user-select: none;
+                            }
+                            .${IDs.main} {
+                                pointer-events: none;
+                                ::after,
+                                ::before {
+                                    border-color: ${theme.colors.disabled} !important;
+                                }
+                            }
+                        }
+                    `
     },
     label: {
       container: css`
-				display: flex;
-				margin-bottom: 4px;
-				label {
-					color: ${theme.colors.label};
-					${typography.heading6};
-					pointer-events: initial;
-					user-select: initial;
-				}
-			`,
+                        display: flex;
+                        margin-bottom: 4px;
+                        label {
+                            color: ${theme.colors.label};
+                            ${typography.heading6};
+                            pointer-events: initial;
+                            user-select: initial;
+                        }
+                    `,
       required: css`
-				color: ${theme.colors.danger};
-				${typography.heading6};
-			`
+                        color: ${theme.colors.danger};
+                        ${typography.heading6};
+                    `
     },
     main: {
       outlined: css`
-				background-color: white;
-				border-radius: 4px;
-				display: flex;
-				flex-direction: column;
-				height: 40px;
-				pointer-events: initial;
-				position: relative;
-				width: 100%;
-				::before {
-					background-color: transparent;
-					border-radius: 4px;
-					border: solid 1px ${theme.colors.border};
-					bottom: 0;
-					content: '\\00a0';
-					left: 0;
-					pointer-events: none;
-					position: absolute;
-					right: 0;
-					top: 0;
-					transition: border-color 0.2s ease;
-					user-select: none;
-				}
-				:hover:not(.focused):not(.error) {
-					background-color: ${theme.colors.hover};
-					::before {
-						border-color: ${theme.colors.primary};
-					}
-					input::placeholder,
-					.${IDs.icon}.svg-default {
-						color: ${theme.colors.primary};
-					}
-				}
-				
-				&.focused {
-					::before {
-						border: 2px solid ${theme.colors.info};
-					}
-					.${IDs.icon}.svg-default {
-						opacity: 0;
-						visibility: hidden;
-					}
-					.${IDs.icon}.svg-active {
-						opacity: 1;
-						visibility: visible;
-					}
-					~ .${IDs.clock} {
-						opacity: 1;
-						transform: scale(1);
-					}
-				}
-				&.error {
-					::before {
-						border-color: ${theme.colors.danger};
-					}
-					.${IDs.icon}.svg-default {
-						color: ${theme.colors.danger};
-					}
-					
-				}
-			`,
+                        background-color: white;
+                        border-radius: 4px;
+                        display: flex;
+                        flex-direction: column;
+                        height: 40px;
+                        pointer-events: initial;
+                        position: relative;
+                        width: 100%;
+                        ::before {
+                            background-color: transparent;
+                            border-radius: 4px;
+                            border: solid 1px ${theme.colors.border};
+                            bottom: 0;
+                            content: '\\00a0';
+                            left: 0;
+                            pointer-events: none;
+                            position: absolute;
+                            right: 0;
+                            top: 0;
+                            transition: border-color 0.2s ease;
+                            user-select: none;
+                        }
+                        :hover:not(.focused):not(.error) {
+                            background-color: ${theme.colors.hover};
+                            ::before {
+                                border-color: ${theme.colors.primary};
+                            }
+                            input::placeholder,
+                            .${IDs.icon}.svg-default {
+                                color: ${theme.colors.primary};
+                            }
+                        }
+
+                        &.focused {
+                            ::before {
+                                border: 2px solid ${theme.colors.info};
+                            }
+                            .${IDs.icon}.svg-default {
+                                opacity: 0;
+                                visibility: hidden;
+                            }
+                            .${IDs.icon}.svg-active {
+                                opacity: 1;
+                                visibility: visible;
+                            }
+                            ~ .${IDs.clock} {
+                                opacity: 1;
+                                transform: scale(1);
+                            }
+                        }
+                        &.error {
+                            ::before {
+                                border-color: ${theme.colors.danger};
+                            }
+                            .${IDs.icon}.svg-default {
+                                color: ${theme.colors.danger};
+                            }
+                        }
+                    `,
       underlined: css`
-				display: flex;
-				flex-direction: column;
-				height: 40px;
-				pointer-events: initial;
-				position: relative;
-				width: 100%;
-				:after {
-					background-color: transparent;
-					border-bottom: 2px solid ${theme.colors.info};
-					bottom: 0;
-					content: '';
-					left: 0;
-					pointer-events: none;
-					position: absolute;
-					right: 0;
-					top: 0;
-					transform: scaleX(0);
-					transform-origin: left;
-					transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-				}
-				::before {
-					background-color: transparent;
-					border-bottom: solid 1px ${theme.colors.border};
-					bottom: 0;
-					content: '\\00a0';
-					left: 0;
-					pointer-events: none;
-					position: absolute;
-					right: 0;
-					top: 0;
-					transition: border-color 0.2s ease;
-					user-select: none;
-				}
-				:hover:not(.focused):not(.error) {
-					::before {
-						border-color: ${theme.colors.primary};
-					}
-					input::placeholder,
-					.${IDs.icon}.svg-default {
-						color: ${theme.colors.primary};
-					}
-				}
-				
-				&.focused {
-					::after {
-						transform: scale(1);
-					}
-					.${IDs.icon}.svg-default {
-						opacity: 0;
-						visibility: hidden;
-					}
-					.${IDs.icon}.svg-active {
-						opacity: 1;
-						visibility: visible;
-					}
-					~ .${IDs.clock} {
-						opacity: 1;
-						transform: scale(1);
-					}
-				}
-				&.error {
-					::after, ::before {
-						border-color: ${theme.colors.danger};
-					}
-					.${IDs.icon}.svg-default {
-						color: ${theme.colors.danger};
-					}
-					
-				}
-			`
+                        display: flex;
+                        flex-direction: column;
+                        height: 40px;
+                        pointer-events: initial;
+                        position: relative;
+                        width: 100%;
+                        :after {
+                            background-color: transparent;
+                            border-bottom: 2px solid ${theme.colors.info};
+                            bottom: 0;
+                            content: '';
+                            left: 0;
+                            pointer-events: none;
+                            position: absolute;
+                            right: 0;
+                            top: 0;
+                            transform: scaleX(0);
+                            transform-origin: left;
+                            transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+                        }
+                        ::before {
+                            background-color: transparent;
+                            border-bottom: solid 1px ${theme.colors.border};
+                            bottom: 0;
+                            content: '\\00a0';
+                            left: 0;
+                            pointer-events: none;
+                            position: absolute;
+                            right: 0;
+                            top: 0;
+                            transition: border-color 0.2s ease;
+                            user-select: none;
+                        }
+                        :hover:not(.focused):not(.error) {
+                            ::before {
+                                border-color: ${theme.colors.primary};
+                            }
+                            input::placeholder,
+                            .${IDs.icon}.svg-default {
+                                color: ${theme.colors.primary};
+                            }
+                        }
+
+                        &.focused {
+                            ::after {
+                                transform: scale(1);
+                            }
+                            .${IDs.icon}.svg-default {
+                                opacity: 0;
+                                visibility: hidden;
+                            }
+                            .${IDs.icon}.svg-active {
+                                opacity: 1;
+                                visibility: visible;
+                            }
+                            ~ .${IDs.clock} {
+                                opacity: 1;
+                                transform: scale(1);
+                            }
+                        }
+                        &.error {
+                            ::after,
+                            ::before {
+                                border-color: ${theme.colors.danger};
+                            }
+                            .${IDs.icon}.svg-default {
+                                color: ${theme.colors.danger};
+                            }
+                        }
+                    `
     },
     input: {
       outlined: css`
-				background-color: transparent;
-				border: 0;
-				${typography.paragraph1};
-				margin: 0;
-				outline: none;
-				padding: 10px 16px;
-				position: relative;
-				width: 100%;
-				&::placeholder {
-					color: ${theme.colors.placeholder};
-					letter-spacing: 0.0675em;
-					transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
-				}
-			`,
+                        background-color: transparent;
+                        border: 0;
+                        ${typography.paragraph1};
+                        margin: 0;
+                        outline: none;
+                        padding: 10px 16px;
+                        position: relative;
+                        width: 100%;
+                        &::placeholder {
+                            color: ${theme.colors.placeholder};
+                            letter-spacing: 0.0675em;
+                            transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
+                        }
+                    `,
       underlined: css`
-				background-color: white;
-				border: 0;
-				${typography.paragraph1};
-				margin: auto 0;
-				outline: none;
-				padding: 0;
-				position: relative;
-				width: 100%;
-				&::placeholder {
-					color: ${theme.colors.placeholder};
-					letter-spacing: 0.0675em;
-					transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
-				}
-			`
+                        background-color: white;
+                        border: 0;
+                        ${typography.paragraph1};
+                        margin: auto 0;
+                        outline: none;
+                        padding: 0;
+                        position: relative;
+                        width: 100%;
+                        &::placeholder {
+                            color: ${theme.colors.placeholder};
+                            letter-spacing: 0.0675em;
+                            transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
+                        }
+                    `
     },
     icon: {
       outlined: css`
-				align-items: center;
-				color: ${theme.colors.border};
-				cursor: pointer;
-				display: flex;
-				height: 24px;
-				justify-content: center;
-				position: absolute;
-				top: 50%;
-				right: 20px;
-				transform: translateY(-50%);
-				transition: opacity 0.2s ease, color 0.2s ease;
-				width: 24px;
-				&.svg-active {
-					opacity: 0;
-					visibility: hidden;
-					:hover {
-						color: ${theme.colors.primary};
-					}
-				}
-			`,
+                        align-items: center;
+                        color: ${theme.colors.border};
+                        cursor: pointer;
+                        display: flex;
+                        height: 24px;
+                        justify-content: center;
+                        position: absolute;
+                        top: 50%;
+                        right: 20px;
+                        transform: translateY(-50%);
+                        transition: opacity 0.2s ease, color 0.2s ease;
+                        width: 24px;
+                        &.svg-active {
+                            opacity: 0;
+                            visibility: hidden;
+                            :hover {
+                                color: ${theme.colors.primary};
+                            }
+                        }
+                    `,
       underlined: css`
-				align-items: center;
-				color: ${theme.colors.border};
-				cursor: pointer;
-				display: flex;
-				height: 24px;
-				justify-content: center;
-				position: absolute;
-				top: 50%;
-				right: 6px;
-				transform: translateY(-50%);
-				transition: opacity 0.2s ease, color 0.2s ease;
-				width: 24px;
-				&.svg-active {
-					opacity: 0;
-					visibility: hidden;
-					:hover {
-						color: ${theme.colors.primary};
-					}
-				}
-			`
+                        align-items: center;
+                        color: ${theme.colors.border};
+                        cursor: pointer;
+                        display: flex;
+                        height: 24px;
+                        justify-content: center;
+                        position: absolute;
+                        top: 50%;
+                        right: 6px;
+                        transform: translateY(-50%);
+                        transition: opacity 0.2s ease, color 0.2s ease;
+                        width: 24px;
+                        &.svg-active {
+                            opacity: 0;
+                            visibility: hidden;
+                            :hover {
+                                color: ${theme.colors.primary};
+                            }
+                        }
+                    `
     },
     error: {
       outlined: css`
-				color: ${theme.colors.danger};
-				${typography.paragraph3};
-				margin-top: 8px;
-				pointer-events: none;
-			`,
+                        color: ${theme.colors.danger};
+                        ${typography.paragraph3};
+                        margin-top: 8px;
+                        pointer-events: none;
+                    `,
       underlined: css`
-				color: ${theme.colors.danger};
-				${typography.paragraph3};
-				bottom: -20px;
-				position: absolute;
-				pointer-events: none;
-			`
+                        color: ${theme.colors.danger};
+                        ${typography.paragraph3};
+                        bottom: -20px;
+                        position: absolute;
+                        pointer-events: none;
+                    `
     },
     clock: {
       container: css`
-				background-color: white;
-				border-radius: 4px;
-				box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);
-				display: flex;
-				height: ${formatDimension(activeHeight)}px;
-				min-width: 120px;
-				opacity: 0;
-				position: fixed;
-				transform: scale(0);
-				transition: transform 0.2s ease-in-out, opacity 0.2s ease-out, top 0.1s linear, bottom 0.1s linear;
-				width: ${formatDimension(activeWidth)}px;
-				z-index: 9001;
-			`,
+                        background-color: white;
+                        border-radius: 4px;
+                        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
+                        display: flex;
+                        height: ${formatDimension(activeHeight)}px;
+                        min-width: 120px;
+                        opacity: 0;
+                        position: fixed;
+                        transform: scale(0);
+                        transition: transform 0.2s ease-in-out, opacity 0.2s ease-out, top 0.1s linear,
+                            bottom 0.1s linear;
+                        width: ${formatDimension(activeWidth)}px;
+                        z-index: ${zIndex(1)};
+                    `,
       wrapper: css`
-				border-radius: 4px;
-				flex: 1;
-			`
+                        border-radius: 4px;
+                        flex: 1;
+                    `
     }
   };