@bitrise/bitkit-v2 0.3.469-beta.2976 → 0.3.469

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.d.ts

@@ -1,55 +0,0 @@
-import { Select, SelectTriggerProps } from '@chakra-ui/react/select';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuErrorStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
-import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
-export type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {
-    /**
-     * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —
-     * a workspace always has one, unlike a plain menu item.
-     */
-    avatar?: string;
-};
-/**
- * The list length at which the design adds the search input. Below it the menu is short enough
- * to read at a glance and a search field would only be in the way. Exported for the stories,
- * which label each list by the side of this it falls on — not part of the package's surface.
- */
-export declare const searchableFrom = 6;
-export type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {
-    /**
-     * A single `BitkitSelectMenuAction` shown under the list, typically "Create workspace". Its
-     * presence is the toggle — there is no boolean for it.
-     */
-    children?: BitkitSelectMenuActionChild;
-    isLoading?: boolean;
-    /** The small uppercase caption above the workspace name. */
-    label?: string;
-    /**
-     * Fires when the menu opens and when it closes — where a list loaded on demand belongs. The
-     * menu also opens from the keyboard, which fires no click on the trigger.
-     */
-    onOpenChange?: (open: boolean) => void;
-    onValueChange?: (value: string) => void;
-    /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */
-    value?: string;
-    workspaces: Array<BitkitUISideNavWorkspaceProps>;
-} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
-declare const UISideNavWorkspaceSelector: import('react').ForwardRefExoticComponent<Omit<Select.TriggerProps, "children" | "onChange"> & {
-    /**
-     * A single `BitkitSelectMenuAction` shown under the list, typically "Create workspace". Its
-     * presence is the toggle — there is no boolean for it.
-     */
-    children?: BitkitSelectMenuActionChild;
-    isLoading?: boolean;
-    /** The small uppercase caption above the workspace name. */
-    label?: string;
-    /**
-     * Fires when the menu opens and when it closes — where a list loaded on demand belongs. The
-     * menu also opens from the keyboard, which fires no click on the trigger.
-     */
-    onOpenChange?: (open: boolean) => void;
-    onValueChange?: (value: string) => void;
-    /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */
-    value?: string;
-    workspaces: Array<BitkitUISideNavWorkspaceProps>;
-} & Omit<BitkitSelectMenuSearchProps, "searchPlaceholder"> & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLButtonElement>>;
-export default UISideNavWorkspaceSelector;

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js

@@ -1,127 +0,0 @@
-import IconChevronDown from "../../icons/IconChevronDown.js";
-import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
-import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
-import { useUISideNavContext } from "./UISideNavContext.js";
-import { Box } from "@chakra-ui/react/box";
-import { forwardRef, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@chakra-ui/react/portal";
-import { Text } from "@chakra-ui/react/text";
-import { useControllableState } from "@chakra-ui/react/hooks";
-import { createListCollection } from "@chakra-ui/react/collection";
-import { Select } from "@chakra-ui/react/select";
-import { useFilter } from "@chakra-ui/react/locale";
-var UISideNavWorkspaceSelector = forwardRef((props, ref) => {
-	const { children, css, emptyHelperText, emptyLabel, errorHelperText, errorLabel, isLoading, label = "Workspace", onOpenChange, onScrolledToBottom, onSearchChange, onValueChange, searchValue, value, workspaces, ...rest } = props;
-	const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();
-	const id = useId();
-	const labelId = `${id}-label`;
-	const valueId = `${id}-value`;
-	const { contains } = useFilter({ sensitivity: "base" });
-	const [ownQuery, setOwnQuery] = useState("");
-	const [currentValue, setCurrentValue] = useControllableState({
-		defaultValue: void 0,
-		value
-	});
-	const isSearchDelegated = onSearchChange !== void 0;
-	const query = isSearchDelegated ? searchValue : ownQuery;
-	const hasSearch = isSearchDelegated || workspaces.length >= 6;
-	const collection = useMemo(() => {
-		const items = (ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces).map((workspace) => ({
-			...workspace,
-			avatar: workspace.avatar ?? null
-		}));
-		return createListCollection({ items });
-	}, [
-		contains,
-		ownQuery,
-		workspaces
-	]);
-	const lastSelected = useRef(void 0);
-	const matched = workspaces.find((workspace) => workspace.value === currentValue);
-	if (matched) lastSelected.current = matched;
-	const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : void 0);
-	return /* @__PURE__ */ jsxs(Select.Root, {
-		collection,
-		css: styles.workspaceRoot,
-		ids: { label: labelId },
-		onOpenChange: (details) => {
-			setMenuOpen(details.open);
-			if (!details.open) setOwnQuery("");
-			onOpenChange?.(details.open);
-		},
-		onValueChange: (details) => {
-			setCurrentValue(details.value[0]);
-			onValueChange?.(details.value[0]);
-		},
-		positioning: isMobile ? {
-			gutter: 0,
-			offset: { crossAxis: 16 },
-			overflowPadding: 16
-		} : {
-			gutter: -8,
-			offset: { crossAxis: 16 },
-			placement: "bottom-start"
-		},
-		size: "lg",
-		value: currentValue === void 0 ? [] : [currentValue],
-		children: [/* @__PURE__ */ jsxs(Select.Control, {
-			css: styles.workspaceControl,
-			children: [/* @__PURE__ */ jsx(Select.HiddenSelect, {}), /* @__PURE__ */ jsxs(Select.Trigger, {
-				ref,
-				unstyled: true,
-				"aria-labelledby": `${labelId} ${valueId}`,
-				...rest,
-				css: [styles.workspace, css],
-				children: [
-					/* @__PURE__ */ jsx(BitkitAvatar, {
-						borderColor: "border/minimal",
-						borderWidth: "1",
-						name: selected?.label ?? "",
-						size: "40",
-						src: selected?.avatar ?? "",
-						variant: "image"
-					}),
-					/* @__PURE__ */ jsxs(Box, {
-						css: styles.workspaceTextBlock,
-						children: [/* @__PURE__ */ jsx(Text, {
-							css: styles.workspaceLabel,
-							id: labelId,
-							children: label
-						}), /* @__PURE__ */ jsx(Text, {
-							css: styles.workspaceValue,
-							id: valueId,
-							children: selected?.label
-						})]
-					}),
-					/* @__PURE__ */ jsx(Select.Indicator, {
-						css: styles.workspaceChevron,
-						children: /* @__PURE__ */ jsx(IconChevronDown, {})
-					})
-				]
-			})]
-		}), /* @__PURE__ */ jsx(Portal, {
-			container: isMobile ? menuContainerRef : void 0,
-			children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
-				collection,
-				contentProps: { css: styles.workspaceMenu },
-				emptyHelperText,
-				emptyLabel,
-				errorHelperText,
-				errorLabel,
-				isLoading,
-				onScrolledToBottom,
-				onSearchChange: hasSearch ? onSearchChange ?? setOwnQuery : void 0,
-				searchPlaceholder: "Search your workspaces",
-				searchValue: query,
-				size: "lg",
-				children
-			}) })
-		})]
-	});
-});
-UISideNavWorkspaceSelector.displayName = "BitkitUISideNav.WorkspaceSelector";
-//#endregion
-export { UISideNavWorkspaceSelector as default };
-
-//# sourceMappingURL=UISideNavWorkspaceSelector.js.map

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UISideNavWorkspaceSelector.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavWorkspaceSelector.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectTriggerProps } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useId, useMemo, useRef, useState } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {\n  /**\n   * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —\n   * a workspace always has one, unlike a plain menu item.\n   */\n  avatar?: string;\n};\n\n/**\n * The list length at which the design adds the search input. Below it the menu is short enough\n * to read at a glance and a search field would only be in the way. Exported for the stories,\n * which label each list by the side of this it falls on — not part of the package's surface.\n */\nexport const searchableFrom = 6;\n\nexport type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {\n  /**\n   * A single `BitkitSelectMenuAction` shown under the list, typically \"Create workspace\". Its\n   * presence is the toggle — there is no boolean for it.\n   */\n  children?: BitkitSelectMenuActionChild;\n  isLoading?: boolean;\n  /** The small uppercase caption above the workspace name. */\n  label?: string;\n  /**\n   * Fires when the menu opens and when it closes — where a list loaded on demand belongs. The\n   * menu also opens from the keyboard, which fires no click on the trigger.\n   */\n  onOpenChange?: (open: boolean) => void;\n  onValueChange?: (value: string) => void;\n  /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */\n  value?: string;\n  workspaces: Array<BitkitUISideNavWorkspaceProps>;\n  // The copy is the design's, not the consumer's, so the placeholder is not on the way through.\n} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst UISideNavWorkspaceSelector = forwardRef<HTMLButtonElement, BitkitUISideNavWorkspaceSelectorProps>(\n  (props, ref) => {\n    const {\n      children,\n      css,\n      emptyHelperText,\n      emptyLabel,\n      errorHelperText,\n      errorLabel,\n      isLoading,\n      label = 'Workspace',\n      onOpenChange,\n      onScrolledToBottom,\n      onSearchChange,\n      onValueChange,\n      searchValue,\n      value,\n      workspaces,\n      ...rest\n    } = props;\n\n    const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();\n    const id = useId();\n    const labelId = `${id}-label`;\n    const valueId = `${id}-value`;\n    const { contains } = useFilter({ sensitivity: 'base' });\n\n    const [ownQuery, setOwnQuery] = useState('');\n    const [currentValue, setCurrentValue] = useControllableState<string | undefined>({\n      defaultValue: undefined,\n      value,\n    });\n\n    // A consumer that passes `onSearchChange` is searching somewhere we cannot see — a server, a\n    // paged list — so `workspaces` is already the result and its length says nothing about how\n    // many there are. They keep the input and the filtering; otherwise both are ours.\n    const isSearchDelegated = onSearchChange !== undefined;\n    const query = isSearchDelegated ? searchValue : ownQuery;\n    const hasSearch = isSearchDelegated || workspaces.length >= searchableFrom;\n\n    const collection = useMemo(() => {\n      const matches = ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces;\n\n      // `null` rather than nothing for a workspace without a logo: that is what tells the menu to\n      // draw the initials, where an absent `avatar` would leave the row with no avatar at all.\n      const items: Array<BitkitSelectMenuItemProps> = matches.map((workspace) => ({\n        ...workspace,\n        avatar: workspace.avatar ?? null,\n      }));\n\n      return createListCollection({ items });\n    }, [contains, ownQuery, workspaces]);\n\n    // `workspaces` is the search result while the search is delegated, so the selected workspace\n    // can drop out of it mid-query. The cell keeps naming the workspace you are actually in.\n    const lastSelected = useRef<BitkitUISideNavWorkspaceProps>(undefined);\n    const matched = workspaces.find((workspace) => workspace.value === currentValue);\n    if (matched) lastSelected.current = matched;\n    const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : undefined);\n\n    return (\n      <Select.Root\n        collection={collection}\n        css={styles.workspaceRoot}\n        ids={{ label: labelId }}\n        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\n          onOpenChange?.(details.open);\n        }}\n        onValueChange={(details) => {\n          setCurrentValue(details.value[0]);\n          onValueChange?.(details.value[0]);\n        }}\n        // Tucked into the rail rather than hung off it: inset from the rail's edge and lapping\n        // over the workspace cell, so the menu reads as the cell unfolding.\n        positioning={\n          isMobile\n            ? { gutter: 0, offset: { crossAxis: 16 }, overflowPadding: 16 }\n            : { gutter: -8, offset: { crossAxis: 16 }, placement: 'bottom-start' }\n        }\n        size=\"lg\"\n        value={currentValue === undefined ? [] : [currentValue]}\n      >\n        <Select.Control css={styles.workspaceControl}>\n          <Select.HiddenSelect />\n          <Select.Trigger\n            ref={ref}\n            unstyled\n            aria-labelledby={`${labelId} ${valueId}`}\n            {...rest}\n            css={[styles.workspace, css]}\n          >\n            <BitkitAvatar\n              borderColor=\"border/minimal\"\n              borderWidth=\"1\"\n              name={selected?.label ?? ''}\n              size=\"40\"\n              src={selected?.avatar ?? ''}\n              variant=\"image\"\n            />\n            <Box css={styles.workspaceTextBlock}>\n              <Text css={styles.workspaceLabel} id={labelId}>\n                {label}\n              </Text>\n              <Text css={styles.workspaceValue} id={valueId}>\n                {selected?.label}\n              </Text>\n            </Box>\n            <Select.Indicator css={styles.workspaceChevron}>\n              <IconChevronDown />\n            </Select.Indicator>\n          </Select.Trigger>\n        </Select.Control>\n        {/*\n          In the drawer the menu goes to the panel rather than the document: the panel scrolls\n          under its own header, so a menu left in the flow would travel with the rows and be\n          clipped by them, and anywhere outside the panel is outside the dialog's focus trap.\n        */}\n        <Portal container={isMobile ? menuContainerRef : undefined}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              contentProps={{ css: styles.workspaceMenu }}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              errorHelperText={errorHelperText}\n              errorLabel={errorLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={hasSearch ? (onSearchChange ?? setOwnQuery) : undefined}\n              searchPlaceholder=\"Search your workspaces\"\n              searchValue={query}\n              size=\"lg\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    );\n  },\n);\n\nUISideNavWorkspaceSelector.displayName = 'BitkitUISideNav.WorkspaceSelector';\n\nexport default UISideNavWorkspaceSelector;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/UISideNav.recipe.d.ts

@@ -1,119 +0,0 @@
-/**
- * The footprint the rail keeps in the page. The expanded rail overlays the content rather than
- * pushing it, so this is the gutter a layout reserves beside the navigation.
- */
-export declare const uiSideNavRailWidth: `${number}rem`;
-declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
-    layout: {
-        rail: {
-            root: {
-                paddingBlockEnd: "12";
-                transition: "width 100ms ease-out";
-                transitionDelay: "50ms";
-                width: `${number}rem`;
-                _motionReduce: {
-                    transition: "none";
-                };
-                '&[data-expanded]': {
-                    transitionDelay: "100ms";
-                    width: `${number}rem`;
-                };
-            };
-            workspace: {
-                paddingInline: "16";
-                minWidth: `${number}rem`;
-            };
-            workspaceControl: {
-                minWidth: `${number}rem`;
-            };
-            workspaceMenu: {
-                width: `${number}rem`;
-            };
-            body: {
-                overflowX: "hidden";
-                overflowY: "auto";
-                scrollbar: "hidden";
-            };
-            item: {
-                gap: "24";
-                paddingBlock: "16";
-                minWidth: `${number}rem`;
-            };
-            link: {
-                gap: "24";
-                minWidth: `${number}rem`;
-            };
-            footerSeparator: {
-                '[data-expanded] &': {
-                    paddingInline: "16";
-                };
-            };
-            footerHeading: {
-                minWidth: `${number}rem`;
-            };
-        };
-        drawer: {
-            root: {
-                overflowX: "hidden";
-                overflowY: "auto";
-                width: "full";
-            };
-            workspaceRoot: {
-                background: "sys/ui/sidenav/bg";
-                insetBlockStart: number;
-                position: "sticky";
-                zIndex: number;
-            };
-            workspace: {
-                paddingBlock: "16";
-                paddingInlineEnd: "24";
-                paddingInlineStart: "16";
-            };
-            item: {
-                gap: "12";
-                paddingBlock: "16";
-            };
-            link: {
-                gap: "12";
-            };
-            footer: {
-                paddingBlockEnd: "16";
-                paddingBlockStart: "12";
-                position: "relative";
-            };
-            footerHeading: {
-                paddingBlockStart: "12";
-                '&[data-section]': {
-                    marginBlockStart: "12";
-                    paddingBlockStart: "24";
-                    position: "relative";
-                    _before: {
-                        insetBlockStart: number;
-                        insetInline: number;
-                        position: "absolute";
-                        background: "border/inverse";
-                        content: "\"\"";
-                        height: "1";
-                        opacity: 0.2;
-                    };
-                };
-            };
-            footerSeparator: {
-                insetBlockStart: number;
-                insetInline: number;
-                paddingBlock: number;
-                paddingInline: number;
-                position: "absolute";
-            };
-            workspaceMenu: {
-                maxHeight: "var(--available-height)";
-                '--select-menu-list-max-height': "none";
-            };
-            body: {
-                flex: "1 0 auto";
-                paddingBlock: "8";
-            };
-        };
-    };
-}>;
-export default uiSideNavSlotRecipe;