@fibery/ui-kit 1.29.1 → 1.29.4

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,15 +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`
-  max-width: 360px;
-  padding-top: ${space.s8}px;
-  padding-bottom: ${space.s4}px;
+  min-width: 320px;
+  max-width: 440px;
+  padding-top: ${popupPaddingTop}px;
+  padding-bottom: ${popupPaddingBottom}px;
   padding-left: ${space.s8}px;
   padding-right: ${space.s8}px;
 `;
@@ -66,6 +84,8 @@ const titleClassName = css`
   padding-bottom: ${space.s12}px;
 `;
 
+export const valueMaxHeight = 116;
+
 export const selectInPopupStyles = {
   container: (props: $TSFixMe) => ({
     ...props,
@@ -79,6 +99,11 @@ export const selectInPopupStyles = {
     paddingLeft: 0,
     paddingRight: 0,
   }),
+  control: (props: $TSFixMe) => ({
+    ...props,
+    maxHeight: valueMaxHeight,
+    overflow: "auto",
+  }),
   menu: (props: $TSFixMe) => ({
     ...props,
     minWidth: 100,
@@ -95,6 +120,7 @@ export type TriggerProps = {
   children: ReactNode;
   onClick: React.MouseEventHandler;
   onKeyDown: React.KeyboardEventHandler;
+  disabled?: boolean;
 };
 
 const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
@@ -105,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;
@@ -145,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 {
@@ -167,7 +197,6 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     isClearable = true,
     renderValue,
     title,
-    maxMenuHeight,
     hideOnChange = true,
     renderInPortal = true,
     popupStyles,
@@ -180,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,
     () =>
@@ -268,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) && (
@@ -288,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.*/}
@@ -337,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>
@@ -347,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>