react-animated-select 0.6.0 → 0.7.0

package/dist/index.css

@@ -1 +1 @@
-@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}:root{--rac-base-red: #e7000b;--rac-base-green: #4caf50;--rac-base-yellow: #ffc107;--rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-hover: color-mix(in srgb, Canvas 95%, CanvasText 5%);--rac-select-color: CanvasText;--rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);--rac-select-padding: 0em .5em;--rac-select-min-height: 2em;--rac-disabled-opacity: .75;--rac-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--rac-title-font-size: 1em;--rac-dots-color: currentColor;--rac-dots-gap: 3px;--rac-dots-padding-left: .25em;--rac-dots-align: end;--rac-dots-animation-duration: 1.4s;--rac-dots-animation-delay-1: 0s;--rac-dots-animation-delay-2: .2s;--rac-dots-animation-delay-3: .4s;--rac-arrow-height: 1em;--rac-arrow-width: 1em;--rac-arrow-padding: 1px 0 2px;--rac-cancel-height: .9em;--rac-cancel-width: .9em;--rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);--rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);--rac-scroll-padding-top: .5em;--rac-scroll-padding-bottom: .5em;--rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);--rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-list-color: CanvasText;--rac-list-max-height: 250px;--rac-option-padding: .5em;--rac-option-min-height: 1em;--rac-option-gap: .5em;--rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);--rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);--rac-group-header-font-size: 1.25em;--rac-group-header-font-weight: bold;--rac-group-header-min-height: 1em;--rac-group-header-padding: .5em;--rac-group-arrow-height: 1em;--rac-group-arrow-width: 1em;--rac-group-arrow-padding: 1px 0 2px;--rac-group-container-padding-left: 1em;--rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-multiple-selected-border: .1em solid gray;--rac-multiple-selected-radius: 5px;--rac-checkbox-border: 1px solid gray;--rac-multiple-selected-padding: 0em .25em;--rac-multiple-selected-margin: .25em .5em .25em 0;--rac-multiple-selected-gap: .5em 0;--rac-multiple-deleting-bg: color-mix(in srgb, var(--rac-base-red) 15%, Canvas);--rac-checkbox-margin-right: .2em;--rac-multiple-selected-min-height: 1.5em;--rac-checkbox-size: var(--rac-option-min-height);--rac-multiple-del-bg: color-mix(in srgb, var(--rac-base-red) 30%, Canvas);--rac-multiple-del-hover-color: var(--rac-base-red)}.rac-select{background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);min-height:var(--rac-select-min-height);interpolate-size:allow-keywords;transition:background-color var(--rac-duration-base) ease,border-color var(--rac-duration-base) ease,height var(--rac-duration-base) ease;justify-content:space-between;box-sizing:border-box;cursor:pointer;display:flex}.rac-select:hover{background-color:var(--rac-select-hover);border-color:var(--rac-select-hover)}.rac-loading-style,.rac-disabled-style{opacity:var(--rac-disabled-opacity);transition:border-color var(--rac-duration-base),filter var(--rac-duration-base),opacity var(--rac-duration-base);cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border:var(--rac-select-border-error);cursor:help}.rac-select-title-wrapper{transition:height var(--rac-duration-base) cubic-bezier(.4,0,.2,1);display:flex;width:100%}.rac-select-title{min-height:var(--rac-select-min-height);position:relative;flex-wrap:wrap;display:flex;width:100%}.rac-spacer{min-height:var(--rac-select-min-height)}.rac-title-container{height:100%}.rac-title-text{font-size:var(--rac-title-font-size);align-content:center;display:block;height:100%}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-container{align-items:end;display:grid;height:100%}.rac-loading-dots{display:inline-flex;--rac-dots-size: calc(var(--rac-title-font-size) / 4);--rac-dots-gap: calc(var(--rac-title-font-size) / 6);--rac-dots-padding-left: calc(var(--rac-title-font-size) / 4);--rac-dots-padding-bottom: .5em;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);padding-bottom:var(--rac-dots-padding-bottom)}.rac-loading-dots i{width:var(--rac-dots-size);height:var(--rac-dots-size);background:var(--rac-dots-color, currentColor);border-radius:50%;animation:blink var(--rac-dots-animation-duration) infinite both}.rac-loading-dots i:nth-child(1){animation-delay:var(--rac-dots-animation-delay-1)}.rac-loading-dots i:nth-child(2){animation-delay:var(--rac-dots-animation-delay-2)}.rac-loading-dots i:nth-child(3){animation-delay:var(--rac-dots-animation-delay-3)}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.rac-select-buttons{display:flex;align-items:center}.rac-select-cancel{height:var(--rac-cancel-height);width:var(--rac-cancel-width);transition:opacity var(--rac-duration-fast),border-color var(--rac-duration-fast)}.rac-select-arrow-wrapper{padding:var(--rac-arrow-padding);height:var(--rac-arrow-height);width:var(--rac-arrow-width);will-change:transform;display:block;transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),padding var(--rac-duration-fast);transform-origin:50% 50%;transform:translateZ(0)}.rac-select-arrow-wrapper.--open{transform:rotate(180deg)}.rac-select-arrow,.rac-select-cancel{object-fit:contain}.rac-select-list{background-color:var(--rac-list-background);color:var(--rac-list-color);max-height:var(--rac-list-max-height);overflow-x:hidden;overflow-y:auto;scrollbar-color:var(--rac-scroll-color) var(--rac-scroll-track);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--rac-scroll-padding-top);scroll-padding-bottom:var(--rac-scroll-padding-bottom);transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);justify-content:space-between;gap:var(--rac-option-gap);overflow-wrap:anywhere;word-break:break-all;scrollbar-width:thin;align-items:center;overflow-x:auto;cursor:pointer;display:flex}.rac-select-option:not(.rac-disabled-option):not(.rac-group-option):hover{background-color:var(--rac-option-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-option-highlight)}.rac-select-option.rac-selected,.rac-select-option.rac-selected.rac-highlighted{background-color:var(--rac-option-selected)}.rac-option-title{text-overflow:ellipsis;overflow-wrap:anywhere;word-break:break-all;text-wrap:wrap}.rac-disabled-option{cursor:not-allowed;color:var(--rac-disabled-option-color)}.rac-invalid-option{color:var(--rac-invalid-option-color)}.rac-true-option{color:var(--rac-true-option-color)}.rac-false-option{color:var(--rac-false-option-color)}.rac-loading-option{cursor:wait}.rac-group-header{cursor:pointer;min-height:var(--rac-group-header-min-height);padding:var(--rac-group-header-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;font-weight:var(--rac-group-header-font-weight);font-size:var(--rac-group-header-font-size)}.rac-group-container{padding-left:var(--rac-group-container-padding-left)}.rac-group-arrow-wrapper{display:block;height:var(--rac-group-arrow-height);width:var(--rac-group-arrow-width);padding:var(--rac-group-arrow-padding);will-change:transform;transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),padding var(--rac-duration-fast);transform-origin:50% 50%;transform:translateZ(0)}.rac-group-arrow-wrapper.--open{transform:rotate(180deg)}.rac-disabled-group{cursor:not-allowed;color:var(--rac-disabled-group-color)}.rac-select-selected{display:flex;align-items:center}.rac-multiple-selected-option{transition:background-color var(--rac-duration-fast, --rac-duration) cubic-bezier(.4,0,.2,1),transform var(--rac-duration) ease;background-color:color-mix(in srgb,CanvasText 10%,Canvas);min-height:var(--rac-multiple-selected-min-height);position:relative;display:inline-flex;align-items:center;vertical-align:middle;line-height:normal;padding:var(--rac-multiple-selected-padding);margin:var(--rac-multiple-selected-margin);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}@media(hover:hover){.rac-multiple-selected-option:hover{background-color:color-mix(in srgb,CanvasText 25%,Canvas)}}.rac-multiple-del{background-color:var(--rac-multiple-del-bg);-webkit-tap-highlight-color:transparent;align-items:center;position:absolute;-webkit-user-select:none;user-select:none;display:grid;height:100%;right:0}.rac-multiple-del:hover{color:var(--rac-multiple-del-hover-color)}.rac-multiple-option{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.rac-multiple-selected-option.--deleting-shake{background-color:var(--rac-multiple-deleting-bg);animation:rac-shake .3s infinite}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}.rac-checkbox{margin-right:var(--rac-checkbox-margin-right);min-height:var(--rac-option-min-height);min-width:var(--rac-option-min-height);border:var(--rac-checkbox-border);justify-content:center;align-items:center;display:flex;height:100%}.rac-checkmark{color:var(--rac-base-green);opacity:0;max-width:0;max-height:0;transition:max-height var(--rac-duration-base),max-width var(--rac-duration-base),opacity var(--rac-duration-base)}.rac-checkmark.--checked{max-height:var(--rac-option-min-height);max-width:var(--rac-option-min-height);opacity:1}
+@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}:root{--rac-base-red: #e7000b;--rac-base-green: #4caf50;--rac-base-yellow: #ffc107;--rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-hover: color-mix(in srgb, Canvas 95%, CanvasText 5%);--rac-select-color: CanvasText;--rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);--rac-select-padding: 0em .5em;--rac-select-min-height: 2em;--rac-arrow-height: 1em;--rac-disabled-opacity: .75;--rac-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--rac-title-font-size: 1em;--rac-dots-color: currentColor;--rac-dots-gap: 3px;--rac-dots-padding-left: .25em;--rac-dots-align: end;--rac-dots-animation-duration: 1.4s;--rac-dots-animation-delay-1: 0s;--rac-dots-animation-delay-2: .2s;--rac-dots-animation-delay-3: .4s;--rac-cancel-height: 1em;--rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);--rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);--rac-scroll-padding-top: .5em;--rac-scroll-padding-bottom: .5em;--rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);--rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-list-color: CanvasText;--rac-list-max-height: 250px;--rac-option-padding: .5em;--rac-option-min-height: 1em;--rac-option-gap: .5em;--rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);--rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);--rac-group-header-font-size: 1.25em;--rac-group-header-font-weight: bold;--rac-group-header-min-height: 1em;--rac-group-header-padding: .5em;--rac-group-open-height: 1.5em;--rac-group-arrow-padding: 1px 0 2px;--rac-group-container-padding-left: 1em;--rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-multiple-selected-border: .1em solid gray;--rac-multiple-selected-radius: 5px;--rac-checkbox-border: 1px solid gray;--rac-multiple-selected-padding: 0em .25em;--rac-multiple-selected-margin: .25em .5em .25em 0;--rac-multiple-selected-gap: .5em 0;--rac-multiple-deleting-bg: color-mix(in srgb, var(--rac-base-red) 15%, Canvas);--rac-checkbox-margin-right: .2em;--rac-multiple-selected-min-height: 1.5em;--rac-checkbox-size: var(--rac-option-min-height);--rac-multiple-del-bg: color-mix(in srgb, var(--rac-base-red) 30%, Canvas);--rac-multiple-del-hover-color: var(--rac-base-red)}.rac-select{background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);min-height:var(--rac-select-min-height);interpolate-size:allow-keywords;transition:background-color var(--rac-duration-base) ease,border-color var(--rac-duration-base) ease,height var(--rac-duration-base) ease;justify-content:space-between;box-sizing:border-box;cursor:pointer;display:flex}.rac-select:hover{background-color:var(--rac-select-hover);border-color:var(--rac-select-hover)}.rac-loading-style,.rac-disabled-style{opacity:var(--rac-disabled-opacity);transition:border-color var(--rac-duration-base),filter var(--rac-duration-base),opacity var(--rac-duration-base);cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border:var(--rac-select-border-error);cursor:help}.rac-select-title-wrapper{transition:height var(--rac-duration-base) cubic-bezier(.4,0,.2,1);display:flex;width:100%}.rac-select-title{min-height:var(--rac-select-min-height);position:relative;flex-wrap:wrap;display:flex;width:100%}.rac-spacer{min-height:var(--rac-select-min-height)}.rac-title-container{height:100%}.rac-title-text{font-size:var(--rac-title-font-size);align-content:center;display:block;height:100%}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-container{align-items:end;display:grid;height:100%}.rac-loading-dots{display:inline-flex;--rac-dots-size: calc(var(--rac-title-font-size) / 4);--rac-dots-gap: calc(var(--rac-title-font-size) / 6);--rac-dots-padding-left: calc(var(--rac-title-font-size) / 4);--rac-dots-padding-bottom: .5em;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);padding-bottom:var(--rac-dots-padding-bottom)}.rac-loading-dots i{width:var(--rac-dots-size);height:var(--rac-dots-size);background:var(--rac-dots-color, currentColor);border-radius:50%;animation:blink var(--rac-dots-animation-duration) infinite both}.rac-loading-dots i:nth-child(1){animation-delay:var(--rac-dots-animation-delay-1)}.rac-loading-dots i:nth-child(2){animation-delay:var(--rac-dots-animation-delay-2)}.rac-loading-dots i:nth-child(3){animation-delay:var(--rac-dots-animation-delay-3)}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.rac-select-buttons{display:flex;align-items:center}.rac-select-cancel{height:var(--rac-cancel-height);transition:opacity var(--rac-duration-fast),border-color var(--rac-duration-fast)}.rac-select-arrow{transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1);height:var(--rac-arrow-height);transform-origin:50% 50%;transform:rotate(0);will-change:transform;display:block}.rac-select-arrow.--up,.rac-select-arrow.--open{transform:rotate(180deg)}.rac-select-arrow.--up.--open{transform:rotate(0)}.rac-select-arrow,.rac-select-cancel{object-fit:contain}.rac-select-list{background-color:var(--rac-list-background);color:var(--rac-list-color);max-height:var(--rac-list-max-height);overflow-x:hidden;overflow-y:auto;scrollbar-color:var(--rac-scroll-color) var(--rac-scroll-track);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--rac-scroll-padding-top);scroll-padding-bottom:var(--rac-scroll-padding-bottom);transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);justify-content:space-between;gap:var(--rac-option-gap);overflow-wrap:anywhere;word-break:break-all;scrollbar-width:thin;align-items:center;overflow-x:auto;cursor:pointer;display:flex}.rac-select-option:not(.rac-disabled-option):not(.rac-group-option):hover{background-color:var(--rac-option-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-option-highlight)}.rac-select-option.rac-selected,.rac-select-option.rac-selected.rac-highlighted{background-color:var(--rac-option-selected)}.rac-option-title{text-overflow:ellipsis;overflow-wrap:anywhere;word-break:break-all;text-wrap:wrap}.rac-disabled-option{cursor:not-allowed;color:var(--rac-disabled-option-color)}.rac-invalid-option{color:var(--rac-invalid-option-color)}.rac-true-option{color:var(--rac-true-option-color)}.rac-false-option{color:var(--rac-false-option-color)}.rac-loading-option{cursor:wait}.rac-group-header{cursor:pointer;min-height:var(--rac-group-header-min-height);padding:var(--rac-group-header-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;font-weight:var(--rac-group-header-font-weight);font-size:var(--rac-group-header-font-size)}.rac-group-container{padding-left:var(--rac-group-container-padding-left)}.rac-group-arrow{display:block;will-change:transform;transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),padding var(--rac-duration-fast);transform-origin:50% 50%;transform:translateZ(0)}.rac-group-arrow.--open{transform:rotate(180deg)}.rac-disabled-group{cursor:not-allowed;color:var(--rac-disabled-group-color)}.rac-select-selected{display:flex;align-items:center}.rac-multiple-selected-option{transition:background-color var(--rac-duration-fast, --rac-duration) cubic-bezier(.4,0,.2,1),transform var(--rac-duration) ease;background-color:color-mix(in srgb,CanvasText 10%,Canvas);min-height:var(--rac-multiple-selected-min-height);position:relative;display:inline-flex;align-items:center;vertical-align:middle;line-height:normal;padding:var(--rac-multiple-selected-padding);margin:var(--rac-multiple-selected-margin);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}@media(hover:hover){.rac-multiple-selected-option:hover{background-color:color-mix(in srgb,CanvasText 25%,Canvas)}}.rac-multiple-del{background-color:var(--rac-multiple-del-bg);-webkit-tap-highlight-color:transparent;align-items:center;position:absolute;-webkit-user-select:none;user-select:none;display:grid;height:100%;right:0}.rac-multiple-del:hover{color:var(--rac-multiple-del-hover-color)}.rac-multiple-option{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.rac-multiple-selected-option.--deleting-shake{background-color:var(--rac-multiple-deleting-bg);animation:rac-shake .3s infinite}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}.rac-checkbox-default{margin-right:var(--rac-checkbox-margin-right);min-height:var(--rac-option-min-height);min-width:var(--rac-option-min-height);border:var(--rac-checkbox-border);justify-content:center;align-items:center;position:relative;display:flex;height:100%}.rac-checkbox{margin-right:var(--rac-checkbox-margin-right);justify-content:center;align-items:center;position:relative;display:flex}.rac-checkmark{transition:max-height var(--rac-duration-base),max-width var(--rac-duration-base),opacity var(--rac-duration-base);position:absolute;max-height:0;opacity:0}.rac-checkmark.--checked{max-height:var(--rac-option-min-height);opacity:1}.rac-check-box{height:var(--rac-group-open-height)}@keyframes expandWidth{0%{min-width:0}to{min-width:var(--del-width)}}.rac-del-spacer{animation:expandWidth .3s ease forwards}