@fibery/ui-kit 1.29.2 → 1.29.4

package/src/icons/ast/UnitsProgressBar.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnitsProgressBar: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5 13h10c2 0 3-1 3-3s-1.233-3-3-3H5c-2 0-3 1-3 3s1 3 3 3Zm5-4.5v3h5c.84 0 1.5-.5 1.5-1.5S16 8.5 15 8.5h-5Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"units-progress-bar"};
+
+export default UnitsProgressBar;

package/src/icons/ast/UnitsRichText.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnitsRichText: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.25 3.75A.75.75 0 0 1 14 3h1.25A2.75 2.75 0 0 1 18 5.75v8.5A2.75 2.75 0 0 1 15.25 17H4.75A2.75 2.75 0 0 1 2 14.25V11a.75.75 0 0 1 1.5 0v3.25c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25H14a.75.75 0 0 1-.75-.75Zm-4.65.564H3.8a.8.8 0 1 0 0 1.6h1.6v4a.8.8 0 1 0 1.6 0v-4h1.6a.8.8 0 0 0 0-1.6Zm2.1 3.257h3.6a.664.664 0 0 0 .495-.23.837.837 0 0 0 .205-.555.837.837 0 0 0-.205-.556A.664.664 0 0 0 14.3 6h-3.6a.664.664 0 0 0-.495.23.837.837 0 0 0-.205.556c0 .208.074.408.205.555.131.148.31.23.495.23Zm3.6 4.715c.186 0 .364.082.495.23a.837.837 0 0 1 .205.555.837.837 0 0 1-.205.556.664.664 0 0 1-.495.23H5.7a.664.664 0 0 1-.495-.23.837.837 0 0 1-.205-.556c0-.208.074-.408.205-.555a.663.663 0 0 1 .495-.23h8.6Zm0-3.143h-3.6a.664.664 0 0 0-.495.23.837.837 0 0 0-.205.556c0 .208.074.408.205.555.131.148.31.23.495.23h3.6a.664.664 0 0 0 .495-.23A.837.837 0 0 0 15 9.93a.837.837 0 0 0-.205-.556.664.664 0 0 0-.495-.23Z"},"children":[]}],"metadata":""}]},"name":"units-rich-text"};
+
+export default UnitsRichText;

package/src/icons/ast/UnitsSnippet.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnitsSnippet: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 15A2.25 2.25 0 0 1 2 12.75v-5.5A2.25 2.25 0 0 1 4.25 5h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 0-.75.75v5.5c0 .414.336.75.75.75h.5a.75.75 0 0 1 0 1.5h-.5ZM18 12.75A2.25 2.25 0 0 1 15.75 15h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 0 .75-.75v-5.5a.75.75 0 0 0-.75-.75h-.5a.75.75 0 0 1 0-1.5h.5A2.25 2.25 0 0 1 18 7.25v5.5Zm-12-1.5a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm0-3a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 6 8.25Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"units-snippet"};
+
+export default UnitsSnippet;

package/src/icons/ast/index.tsx

@@ -1,4 +1,5 @@
 // This icon file is generated automatically.
+export { default as Abort } from './Abort';
 export { default as ActivityLog } from './ActivityLog';
 export { default as Activity } from './Activity';
 export { default as AddAfter } from './AddAfter';
@@ -60,6 +61,7 @@ export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
+export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
@@ -107,6 +109,7 @@ export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';
 export { default as Import } from './Import';
 export { default as InfoCircleFilled } from './InfoCircleFilled';
+export { default as InfoCircle } from './InfoCircle';
 export { default as Integration } from './Integration';
 export { default as IntegrationsIntegrationDiscourseColor } from './IntegrationsIntegrationDiscourseColor';
 export { default as IntegrationsIntegrationIntercomColor } from './IntegrationsIntegrationIntercomColor';
@@ -115,6 +118,7 @@ export { default as IntegrationsIntegrationZendeskColor } from './IntegrationsIn
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
+export { default as Key } from './Key';
 export { default as Lab } from './Lab';
 export { default as LayoutDouble } from './LayoutDouble';
 export { default as LayoutSingle } from './LayoutSingle';
@@ -211,6 +215,7 @@ export { default as Rows } from './Rows';
 export { default as Search } from './Search';
 export { default as SelfReferenceOff } from './SelfReferenceOff';
 export { default as SelfReferenceOn } from './SelfReferenceOn';
+export { default as SendArrow } from './SendArrow';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
@@ -253,6 +258,17 @@ export { default as TypeRule } from './TypeRule';
 export { default as TypeSingleSelect } from './TypeSingleSelect';
 export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
+export { default as UnitsAvatar } from './UnitsAvatar';
+export { default as UnitsCollection } from './UnitsCollection';
+export { default as UnitsCounter } from './UnitsCounter';
+export { default as UnitsDbBadgeAbbr } from './UnitsDbBadgeAbbr';
+export { default as UnitsDbBadgeFull } from './UnitsDbBadgeFull';
+export { default as UnitsDbIcon } from './UnitsDbIcon';
+export { default as UnitsField } from './UnitsField';
+export { default as UnitsInput } from './UnitsInput';
+export { default as UnitsProgressBar } from './UnitsProgressBar';
+export { default as UnitsRichText } from './UnitsRichText';
+export { default as UnitsSnippet } from './UnitsSnippet';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserRole } from './UserRole';

package/src/icons/react/Abort.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AbortSvg from '../ast/Abort';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Abort = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AbortSvg} />;
+
+Abort.displayName = 'Abort';
+export default Abort;

package/src/icons/react/DatabaseStroke.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import DatabaseStrokeSvg from '../ast/DatabaseStroke';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const DatabaseStroke = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={DatabaseStrokeSvg} />;
+
+DatabaseStroke.displayName = 'DatabaseStroke';
+export default DatabaseStroke;

package/src/icons/react/InfoCircle.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import InfoCircleSvg from '../ast/InfoCircle';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const InfoCircle = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={InfoCircleSvg} />;
+
+InfoCircle.displayName = 'InfoCircle';
+export default InfoCircle;

package/src/icons/react/Key.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import KeySvg from '../ast/Key';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Key = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={KeySvg} />;
+
+Key.displayName = 'Key';
+export default Key;

package/src/icons/react/SendArrow.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import SendArrowSvg from '../ast/SendArrow';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SendArrow = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={SendArrowSvg} />;
+
+SendArrow.displayName = 'SendArrow';
+export default SendArrow;

package/src/icons/react/UnitsAvatar.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsAvatarSvg from '../ast/UnitsAvatar';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsAvatar = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsAvatarSvg} />;
+
+UnitsAvatar.displayName = 'UnitsAvatar';
+export default UnitsAvatar;

package/src/icons/react/UnitsCollection.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsCollectionSvg from '../ast/UnitsCollection';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsCollection = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsCollectionSvg} />;
+
+UnitsCollection.displayName = 'UnitsCollection';
+export default UnitsCollection;

package/src/icons/react/UnitsCounter.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsCounterSvg from '../ast/UnitsCounter';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsCounter = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsCounterSvg} />;
+
+UnitsCounter.displayName = 'UnitsCounter';
+export default UnitsCounter;

package/src/icons/react/UnitsDbBadgeAbbr.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsDbBadgeAbbrSvg from '../ast/UnitsDbBadgeAbbr';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsDbBadgeAbbr = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsDbBadgeAbbrSvg} />;
+
+UnitsDbBadgeAbbr.displayName = 'UnitsDbBadgeAbbr';
+export default UnitsDbBadgeAbbr;

package/src/icons/react/UnitsDbBadgeFull.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsDbBadgeFullSvg from '../ast/UnitsDbBadgeFull';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsDbBadgeFull = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsDbBadgeFullSvg} />;
+
+UnitsDbBadgeFull.displayName = 'UnitsDbBadgeFull';
+export default UnitsDbBadgeFull;

package/src/icons/react/UnitsDbIcon.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsDbIconSvg from '../ast/UnitsDbIcon';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsDbIcon = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsDbIconSvg} />;
+
+UnitsDbIcon.displayName = 'UnitsDbIcon';
+export default UnitsDbIcon;

package/src/icons/react/UnitsField.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsFieldSvg from '../ast/UnitsField';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsField = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsFieldSvg} />;
+
+UnitsField.displayName = 'UnitsField';
+export default UnitsField;

package/src/icons/react/UnitsInput.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsInputSvg from '../ast/UnitsInput';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsInput = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsInputSvg} />;
+
+UnitsInput.displayName = 'UnitsInput';
+export default UnitsInput;

package/src/icons/react/UnitsProgressBar.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsProgressBarSvg from '../ast/UnitsProgressBar';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsProgressBar = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsProgressBarSvg} />;
+
+UnitsProgressBar.displayName = 'UnitsProgressBar';
+export default UnitsProgressBar;

package/src/icons/react/UnitsRichText.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsRichTextSvg from '../ast/UnitsRichText';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsRichText = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsRichTextSvg} />;
+
+UnitsRichText.displayName = 'UnitsRichText';
+export default UnitsRichText;

package/src/icons/react/UnitsSnippet.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UnitsSnippetSvg from '../ast/UnitsSnippet';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsSnippet = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UnitsSnippetSvg} />;
+
+UnitsSnippet.displayName = 'UnitsSnippet';
+export default UnitsSnippet;

package/src/icons/react/index.tsx

@@ -1,4 +1,5 @@
 // This icon file is generated automatically.
+export { default as Abort } from './Abort';
 export { default as ActivityLog } from './ActivityLog';
 export { default as Activity } from './Activity';
 export { default as AddAfter } from './AddAfter';
@@ -60,6 +61,7 @@ export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
+export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
@@ -107,6 +109,7 @@ export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';
 export { default as Import } from './Import';
 export { default as InfoCircleFilled } from './InfoCircleFilled';
+export { default as InfoCircle } from './InfoCircle';
 export { default as Integration } from './Integration';
 export { default as IntegrationsIntegrationDiscourseColor } from './IntegrationsIntegrationDiscourseColor';
 export { default as IntegrationsIntegrationIntercomColor } from './IntegrationsIntegrationIntercomColor';
@@ -115,6 +118,7 @@ export { default as IntegrationsIntegrationZendeskColor } from './IntegrationsIn
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
+export { default as Key } from './Key';
 export { default as Lab } from './Lab';
 export { default as LayoutDouble } from './LayoutDouble';
 export { default as LayoutSingle } from './LayoutSingle';
@@ -211,6 +215,7 @@ export { default as Rows } from './Rows';
 export { default as Search } from './Search';
 export { default as SelfReferenceOff } from './SelfReferenceOff';
 export { default as SelfReferenceOn } from './SelfReferenceOn';
+export { default as SendArrow } from './SendArrow';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
@@ -253,6 +258,17 @@ export { default as TypeRule } from './TypeRule';
 export { default as TypeSingleSelect } from './TypeSingleSelect';
 export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
+export { default as UnitsAvatar } from './UnitsAvatar';
+export { default as UnitsCollection } from './UnitsCollection';
+export { default as UnitsCounter } from './UnitsCounter';
+export { default as UnitsDbBadgeAbbr } from './UnitsDbBadgeAbbr';
+export { default as UnitsDbBadgeFull } from './UnitsDbBadgeFull';
+export { default as UnitsDbIcon } from './UnitsDbIcon';
+export { default as UnitsField } from './UnitsField';
+export { default as UnitsInput } from './UnitsInput';
+export { default as UnitsProgressBar } from './UnitsProgressBar';
+export { default as UnitsRichText } from './UnitsRichText';
+export { default as UnitsSnippet } from './UnitsSnippet';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserRole } from './UserRole';

package/src/select/custom-select-partials/menu.tsx

@@ -28,5 +28,5 @@ const MenuRootClass = css`
 export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
   props: MenuProps<Option, IsMulti, Group>
 ) {
-  return <components.Menu {...props} className={cn(props.className, MenuRootClass, "react-select-menu")} />;
+  return <components.Menu {...props} className={cn(MenuRootClass, "react-select-menu", props.className)} />;
 }

package/src/select/select-in-popover.tsx

@@ -2,6 +2,7 @@ import {css, cx} from "@linaria/core";
 import {border, space, textStyles} from "../design-system";
 import {inputOverrides} from "../antd/styles";
 import React, {
+  ComponentProps,
   ComponentType,
   forwardRef,
   ReactNode,
@@ -26,16 +27,32 @@ import {
   StylesConfig,
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
+import {Menu} from "./custom-select-partials/menu";
 
 const offset = [0, space.s4] as [number, number];
+const popupHeightVH = 45;
+const popupMinHeightPx = 300;
+const popupPaddingTop = space.s8;
+const popupPaddingBottom = space.s8;
 const popupContainerClassName = css`
   z-index: 1050;
+  height: max(${popupHeightVH}vh, ${popupMinHeightPx}px);
+  display: flex;
+  flex-direction: row;
+
+  &:is([data-popper-placement="bottom-start"], [data-popper-placement="bottom-end"]) {
+    align-items: flex-start;
+  }
+
+  &:is([data-popper-placement="top-start"], [data-popper-placement="top-end"]) {
+    align-items: flex-end;
+  }
 `;
 const popupClassName = css`
   min-width: 320px;
   max-width: 440px;
-  padding-top: ${space.s8}px;
-  padding-bottom: ${space.s4}px;
+  padding-top: ${popupPaddingTop}px;
+  padding-bottom: ${popupPaddingBottom}px;
   padding-left: ${space.s8}px;
   padding-right: ${space.s8}px;
 `;
@@ -67,6 +84,8 @@ const titleClassName = css`
   padding-bottom: ${space.s12}px;
 `;
 
+export const valueMaxHeight = 116;
+
 export const selectInPopupStyles = {
   container: (props: $TSFixMe) => ({
     ...props,
@@ -80,6 +99,11 @@ export const selectInPopupStyles = {
     paddingLeft: 0,
     paddingRight: 0,
   }),
+  control: (props: $TSFixMe) => ({
+    ...props,
+    maxHeight: valueMaxHeight,
+    overflow: "auto",
+  }),
   menu: (props: $TSFixMe) => ({
     ...props,
     minWidth: 100,
@@ -96,6 +120,7 @@ export type TriggerProps = {
   children: ReactNode;
   onClick: React.MouseEventHandler;
   onKeyDown: React.KeyboardEventHandler;
+  disabled?: boolean;
 };
 
 const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
@@ -106,11 +131,14 @@ const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
   );
 };
 
-type Components = {Trigger: ComponentType<TriggerProps>};
+type Components = {
+  Trigger: ComponentType<TriggerProps>;
+  Menu: ComponentType<ComponentProps<typeof Menu>>;
+};
 
 export type ComponentsConfig = Partial<Components>;
 
-const defaultComponents = {Trigger};
+const defaultComponents = {Trigger, Menu};
 
 type Ref = {
   valueRef: HTMLDivElement | null;
@@ -146,10 +174,11 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
   onMenuOpen?: () => void;
   onMenuClose?: () => void | boolean;
+  getPopupContainer?: () => HTMLElement;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: Props<Option, IsMulti, Group>,
+  props: Omit<Props<Option, IsMulti, Group>, "maxMenuHeight">,
   forwardedRef: React.ForwardedRef<Ref>
 ) {
   const {
@@ -168,7 +197,6 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     isClearable = true,
     renderValue,
     title,
-    maxMenuHeight,
     hideOnChange = true,
     renderInPortal = true,
     popupStyles,
@@ -181,12 +209,14 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     onChange,
     onMenuOpen,
     onMenuClose,
+    getPopupContainer,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useState(menuIsOpen);
   const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const selectRef = useRef<{focus: () => void}>(null);
   const ref = useRef<HTMLDivElement | null>(null);
+
   useImperativeHandle(
     forwardedRef,
     () =>
@@ -269,12 +299,23 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     },
     [onShow, visible]
   );
-
+  const paddingPopup = popupPaddingTop + popupPaddingBottom;
+  const paddingMenu = 6 + 6 + 6;
+  const maxMenuHeight =
+    Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
+    valueMaxHeight -
+    paddingPopup -
+    paddingMenu;
   const mergedComponents = {...defaultComponents, ...components};
 
   return (
     <>
-      <mergedComponents.Trigger innerRef={ref} onClick={onTriggerClick} onKeyDown={onTriggerKeyDown}>
+      <mergedComponents.Trigger
+        innerRef={ref}
+        onClick={onTriggerClick}
+        onKeyDown={onTriggerKeyDown}
+        disabled={disabled}
+      >
         {renderValue ? renderValue() : null}
       </mergedComponents.Trigger>
       {Boolean(triggerElement) && (
@@ -289,6 +330,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
           onClose={() => onHide()}
           trigger={<></>}
           triggerDomElement={triggerElement}
+          getPopupContainer={getPopupContainer}
         >
           {title && <div className={titleClassName}>{title}</div>}
           {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
@@ -338,7 +380,11 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               isClearable={!isCollectionMode && isClearable}
               formatGroupLabel={formatGroupLabel}
               formatOptionLabel={formatOptionLabel}
-              components={{DropdownIndicator: null, IndicatorSeparator: null}}
+              components={{
+                DropdownIndicator: null,
+                IndicatorSeparator: null,
+                Menu: mergedComponents.Menu as $TSFixMe,
+              }}
             />
           </SelectControlSettingsProvider>
         </Popup>
@@ -348,7 +394,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
 }
 
 type SelectInPopoverType = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: Props<Option, IsMulti, Group> & {ref?: React.ForwardedRef<Ref>}
+  props: Omit<Props<Option, IsMulti, Group>, "maxMenuHeight"> & {ref?: React.ForwardedRef<Ref>}
 ) => ReturnType<typeof SelectInPopoverInner>;
 
 // Explicit type assertion to specify that component accepts generic props because forwardRef breaks it

package/src/theme-settings.ts

@@ -13,17 +13,19 @@ export type ThemeMenuPreference = "dark" | "auto";
 export type ThemeMode = "dark" | "light" | "light2";
 
 export function getThemePreference(): ThemePreference {
+  const allowedValues = ["dark", "light", "auto"];
   try {
-    const item = localStorage.getItem(themePreferenceKey);
-    if (item === "auto") {
-      return "auto";
-    } else if (item === "dark") {
-      return "dark";
-    } else if (item === "light") {
-      return "light";
+    const urlParams = new URLSearchParams(window.location.search);
+    const itemInUrl = urlParams.get("force-theme");
+    if (itemInUrl && allowedValues.includes(itemInUrl)) {
+      return itemInUrl as ThemePreference;
+    }
+    const itemInStorage = localStorage.getItem(themePreferenceKey);
+    if (itemInStorage && allowedValues.includes(itemInStorage)) {
+      return itemInStorage as ThemePreference;
     }
   } catch (e) {
-    return "light";
+    // Just return the default below
   }
   return "light";
 }

package/src/toggle.tsx

@@ -81,6 +81,7 @@ interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
   value?: boolean;
   label?: ReactNode;
   labelTitle?: string;
+  labelMutedWhenDisabled?: boolean;
   backgroundColor: string;
   labelPosition?: "first" | "last";
   wrapperClassName?: string;
@@ -95,6 +96,7 @@ export const Toggle: FC<ToggleProps> = ({
   size = 16,
   onChange,
   labelPosition = "last",
+  labelMutedWhenDisabled = true,
   className,
   wrapperClassName,
   ...rest
@@ -149,7 +151,7 @@ export const Toggle: FC<ToggleProps> = ({
       </CircleContainer>
 
       {label && (
-        <Label disabled={disabled} labelPosition={labelPosition}>
+        <Label disabled={disabled && labelMutedWhenDisabled} labelPosition={labelPosition}>
           {label}
         </Label>
       )}

package/src/tooltip.tsx

@@ -20,7 +20,7 @@ const descriptionStyle = css`
   font-weight: ${fontWeight.regular};
 `;
 
-const tooltipStyle = css`
+export const tooltipStyle = css`
   font-size: 13px;
   color: ${themeVars.whiteColor};
   z-index: 100000;
@@ -96,6 +96,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
 export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
   title?: ReactNode;
   description?: ReactNode;
+  tooltipContentStyle?: string;
   setContentElement?: (el: HTMLDivElement | null) => void;
   content?: ReactNode;
   container?: HTMLElement | null | undefined;
@@ -146,6 +147,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       disabled,
       setContentElement,
       container,
+      tooltipContentStyle,
       ...triggerProps
     },
     ref
@@ -179,7 +181,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
             sideOffset={sideOffset}
             align={align}
             alignOffset={alignOffset}
-            className={cx(tooltipStyle, whiteBg && whiteBgStyle)}
+            className={cx(tooltipStyle, whiteBg && whiteBgStyle, tooltipContentStyle)}
           >
             {content}
           </TooltipPrimitive.Content>