@bitrise/bitkit-v2 0.3.471 → 0.3.473
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js +1 -3
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -1
- package/dist/theme/slot-recipes/Drawer.recipe.d.ts +41 -6
- package/dist/theme/slot-recipes/Drawer.recipe.js +21 -33
- package/dist/theme/slot-recipes/Drawer.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +41 -6
- package/package.json +1 -1
|
@@ -9,8 +9,6 @@ import { isValidElement, useEffect, useRef } from "react";
|
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
import { Text } from "@chakra-ui/react/text";
|
|
11
11
|
import { Spinner } from "@chakra-ui/react/spinner";
|
|
12
|
-
import { Select } from "@chakra-ui/react/select";
|
|
13
|
-
import { Combobox } from "@chakra-ui/react/combobox";
|
|
14
12
|
import { isValidTabEvent } from "@zag-js/dom-query";
|
|
15
13
|
//#region lib/components/BitkitSelectMenu/SelectMenuShell.tsx
|
|
16
14
|
var selectSizeMap = {
|
|
@@ -25,7 +23,7 @@ var selectSizeMap = {
|
|
|
25
23
|
spinnerSize: "md"
|
|
26
24
|
}
|
|
27
25
|
};
|
|
28
|
-
var MenuApiProvider = ({ NS, children }) =>
|
|
26
|
+
var MenuApiProvider = ({ NS, children }) => /* @__PURE__ */ jsx(NS.Context, { children });
|
|
29
27
|
var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", errorHelperText, errorLabel, iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchPlaceholder, searchValue, spinnerSize, styles }) => {
|
|
30
28
|
const { css: contentCss, ...restContentProps } = contentProps ?? {};
|
|
31
29
|
const isEmpty = collection.size === 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { isValidTabEvent } from '@zag-js/dom-query';\nimport {\n type ChangeEvent,\n isValidElement,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n type Ref,\n type UIEvent,\n useEffect,\n useRef,\n} from 'react';\n\nimport { IconCross, IconCrossCircle, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuErrorStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport {\n type BitkitSelectMenuActionChild,\n type SelectMenuApi,\n SelectMenuShellContextProvider,\n} from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\ntype MenuApiProviderProps = {\n NS: typeof Select | typeof Combobox;\n children: (api: SelectMenuApi) => ReactNode;\n};\n\nconst MenuApiProvider = ({ NS, children }: MenuApiProviderProps) =>\n NS === Combobox ? <Combobox.Context>{children}</Combobox.Context> : <Select.Context>{children}</Select.Context>;\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n NS: typeof Select | typeof Combobox;\n children?: BitkitSelectMenuActionChild;\n collection: ListCollection<T>;\n contentProps?: SelectContentProps;\n contentRef?: Ref<HTMLDivElement>;\n iconSize: SelectSizes['iconSize'];\n isLoading?: boolean;\n renderItem: (item: T) => ReactNode;\n spinnerSize: SelectSizes['spinnerSize'];\n styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps &\n BitkitSelectMenuErrorStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n NS,\n children,\n collection,\n contentProps,\n contentRef,\n emptyHelperText,\n emptyLabel = 'No matching options',\n errorHelperText,\n errorLabel,\n iconSize,\n isLoading = false,\n onScrolledToBottom,\n onSearchChange,\n renderItem,\n searchPlaceholder,\n searchValue,\n spinnerSize,\n styles,\n}: SelectMenuShellProps<T>) => {\n const { css: contentCss, ...restContentProps } = contentProps ?? {};\n const isEmpty = collection.size === 0;\n const hasError = !isLoading && !!errorLabel;\n const hasAction = isValidElement(children);\n\n const wasAtBottom = useRef(false);\n const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n const list = event.currentTarget;\n const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n wasAtBottom.current = atBottom;\n };\n\n return (\n <MenuApiProvider NS={NS}>\n {(api) => (\n <SelectMenuShellContextProvider value={{ api, iconSize, styles }}>\n <NS.Content\n css={[styles.content, contentCss]}\n ref={contentRef}\n onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Tab' && !isValidTabEvent(event)) api.setOpen(false);\n }}\n {...restContentProps}\n >\n {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n {onSearchChange && (\n <SelectMenuSearch\n iconSize={iconSize}\n placeholder={searchPlaceholder}\n styles={styles}\n value={searchValue ?? ''}\n onSearchChange={onSearchChange}\n />\n )}\n {hasError ? (\n <Box css={styles.errorState}>\n <IconCrossCircle css={styles.errorIcon} size={iconSize} />\n <Box css={styles.errorTextBlock}>\n <Text css={styles.errorLabel}>{errorLabel}</Text>\n {errorHelperText && <Text css={styles.itemHelperText}>{errorHelperText}</Text>}\n </Box>\n </Box>\n ) : (\n <Box css={styles.itemList} onScroll={handleItemListScroll} tabIndex={-1}>\n {isLoading && (\n <Box css={styles.item}>\n <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n <Text css={styles.itemLoadingLabel}>Loading...</Text>\n </Box>\n )}\n {!isLoading && isEmpty && (\n <Box css={styles.emptyState}>\n <Text css={styles.itemLabel}>{emptyLabel}</Text>\n {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n </Box>\n )}\n {!isLoading &&\n !isEmpty &&\n collection.group().map(([type, group]) => (\n <NS.ItemGroup key={type}>\n {type && (\n <NS.ItemGroupLabel asChild>\n <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n </NS.ItemGroupLabel>\n )}\n {group.map(renderItem)}\n </NS.ItemGroup>\n ))}\n </Box>\n )}\n {children}\n </NS.Content>\n </SelectMenuShellContextProvider>\n )}\n </MenuApiProvider>\n );\n};\n\ntype SelectMenuSearchProps = {\n iconSize: '16' | '24';\n onSearchChange: (searchText: string) => void;\n placeholder?: string;\n styles: Record<string, SystemStyleObject>;\n value: string;\n};\n\nconst SelectMenuSearch = ({\n iconSize,\n onSearchChange,\n placeholder = 'Search...',\n styles,\n value,\n}: SelectMenuSearchProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n const input = inputRef.current;\n const content = input?.closest('[data-part=\"content\"]');\n if (!input || content?.getAttribute('data-state') !== 'open') return;\n const focused = document.activeElement;\n if (focused && focused !== content && content.contains(focused)) return;\n input.focus();\n }, []);\n\n return (\n <Box css={styles.searchInputGroup}>\n <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n <chakra.input\n aria-label=\"Search\"\n css={styles.searchInput}\n placeholder={placeholder}\n ref={inputRef}\n value={value}\n onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n onKeyDown={(event) => {\n // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n // regardless of which descendant is focused. That would eat the space before the\n // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n if (event.key === ' ') event.stopPropagation();\n }}\n />\n {value && (\n <chakra.button\n type=\"button\"\n css={styles.searchClear}\n aria-label=\"Clear search\"\n onClick={() => onSearchChange('')}\n >\n <IconCross size={iconSize} />\n </chakra.button>\n )}\n </Box>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { isValidTabEvent } from '@zag-js/dom-query';\nimport {\n type ChangeEvent,\n isValidElement,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n type Ref,\n type UIEvent,\n useEffect,\n useRef,\n} from 'react';\n\nimport { IconCross, IconCrossCircle, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuErrorStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport {\n type BitkitSelectMenuActionChild,\n type SelectMenuApi,\n SelectMenuShellContextProvider,\n} from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\ntype MenuApiProviderProps = {\n NS: typeof Select | typeof Combobox;\n children: (api: SelectMenuApi) => ReactNode;\n};\n\n// The namespace's own Context, not one picked by comparing `NS` against `Combobox`: a bundler can duplicate the\n// namespace object, and a failed comparison put `Select.Context` under a Combobox root, which throws.\nconst MenuApiProvider = ({ NS, children }: MenuApiProviderProps) => <NS.Context>{children}</NS.Context>;\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n NS: typeof Select | typeof Combobox;\n children?: BitkitSelectMenuActionChild;\n collection: ListCollection<T>;\n contentProps?: SelectContentProps;\n contentRef?: Ref<HTMLDivElement>;\n iconSize: SelectSizes['iconSize'];\n isLoading?: boolean;\n renderItem: (item: T) => ReactNode;\n spinnerSize: SelectSizes['spinnerSize'];\n styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps &\n BitkitSelectMenuErrorStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n NS,\n children,\n collection,\n contentProps,\n contentRef,\n emptyHelperText,\n emptyLabel = 'No matching options',\n errorHelperText,\n errorLabel,\n iconSize,\n isLoading = false,\n onScrolledToBottom,\n onSearchChange,\n renderItem,\n searchPlaceholder,\n searchValue,\n spinnerSize,\n styles,\n}: SelectMenuShellProps<T>) => {\n const { css: contentCss, ...restContentProps } = contentProps ?? {};\n const isEmpty = collection.size === 0;\n const hasError = !isLoading && !!errorLabel;\n const hasAction = isValidElement(children);\n\n const wasAtBottom = useRef(false);\n const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n const list = event.currentTarget;\n const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n wasAtBottom.current = atBottom;\n };\n\n return (\n <MenuApiProvider NS={NS}>\n {(api) => (\n <SelectMenuShellContextProvider value={{ api, iconSize, styles }}>\n <NS.Content\n css={[styles.content, contentCss]}\n ref={contentRef}\n onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Tab' && !isValidTabEvent(event)) api.setOpen(false);\n }}\n {...restContentProps}\n >\n {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n {onSearchChange && (\n <SelectMenuSearch\n iconSize={iconSize}\n placeholder={searchPlaceholder}\n styles={styles}\n value={searchValue ?? ''}\n onSearchChange={onSearchChange}\n />\n )}\n {hasError ? (\n <Box css={styles.errorState}>\n <IconCrossCircle css={styles.errorIcon} size={iconSize} />\n <Box css={styles.errorTextBlock}>\n <Text css={styles.errorLabel}>{errorLabel}</Text>\n {errorHelperText && <Text css={styles.itemHelperText}>{errorHelperText}</Text>}\n </Box>\n </Box>\n ) : (\n <Box css={styles.itemList} onScroll={handleItemListScroll} tabIndex={-1}>\n {isLoading && (\n <Box css={styles.item}>\n <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n <Text css={styles.itemLoadingLabel}>Loading...</Text>\n </Box>\n )}\n {!isLoading && isEmpty && (\n <Box css={styles.emptyState}>\n <Text css={styles.itemLabel}>{emptyLabel}</Text>\n {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n </Box>\n )}\n {!isLoading &&\n !isEmpty &&\n collection.group().map(([type, group]) => (\n <NS.ItemGroup key={type}>\n {type && (\n <NS.ItemGroupLabel asChild>\n <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n </NS.ItemGroupLabel>\n )}\n {group.map(renderItem)}\n </NS.ItemGroup>\n ))}\n </Box>\n )}\n {children}\n </NS.Content>\n </SelectMenuShellContextProvider>\n )}\n </MenuApiProvider>\n );\n};\n\ntype SelectMenuSearchProps = {\n iconSize: '16' | '24';\n onSearchChange: (searchText: string) => void;\n placeholder?: string;\n styles: Record<string, SystemStyleObject>;\n value: string;\n};\n\nconst SelectMenuSearch = ({\n iconSize,\n onSearchChange,\n placeholder = 'Search...',\n styles,\n value,\n}: SelectMenuSearchProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n const input = inputRef.current;\n const content = input?.closest('[data-part=\"content\"]');\n if (!input || content?.getAttribute('data-state') !== 'open') return;\n const focused = document.activeElement;\n if (focused && focused !== content && content.contains(focused)) return;\n input.focus();\n }, []);\n\n return (\n <Box css={styles.searchInputGroup}>\n <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n <chakra.input\n aria-label=\"Search\"\n css={styles.searchInput}\n placeholder={placeholder}\n ref={inputRef}\n value={value}\n onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n onKeyDown={(event) => {\n // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n // regardless of which descendant is focused. That would eat the space before the\n // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n if (event.key === ' ') event.stopPropagation();\n }}\n />\n {value && (\n <chakra.button\n type=\"button\"\n css={styles.searchClear}\n aria-label=\"Clear search\"\n onClick={() => onSearchChange('')}\n >\n <IconCross size={iconSize} />\n </chakra.button>\n )}\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAiCA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AAWA,IAAM,mBAAmB,EAAE,IAAI,eAAqC,oBAAC,GAAG,SAAJ,EAAa,SAAqB,CAAA;AAwBtG,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,iBACA,YACA,UACA,YAAY,OACZ,oBACA,gBACA,YACA,mBACA,aACA,aACA,aAC6B;CAC7B,MAAM,EAAE,KAAK,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAClE,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,WAAW,CAAC,aAAa,CAAC,CAAC;CACjC,MAAM,YAAY,eAAe,QAAQ;CAEzC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,wBAAwB,UAAmC;EAC/D,MAAM,OAAO,MAAM;EACnB,MAAM,WAAW,KAAK,aAAa,KAAK,eAAe,KAAK,eAAe;EAE3E,IAAI,YAAY,CAAC,YAAY,SAAS,qBAAqB;EAC3D,YAAY,UAAU;CACxB;CAEA,OACE,oBAAC,iBAAD;EAAqB;EACjB,WAAA,QACA,oBAAC,gCAAD;GAAgC,OAAO;IAAE;IAAK;IAAU;GAAO;GAC7D,UAAA,qBAAC,GAAG,SAAJ;IACE,KAAK,CAAC,OAAO,SAAS,UAAU;IAChC,KAAK;IACL,YAAY,UAA8C;KACxD,IAAI,MAAM,QAAQ,SAAS,CAAC,gBAAgB,KAAK,GAAG,IAAI,QAAQ,KAAK;IACvE;IACA,GAAI;IANN,UAAA;KAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;MAAM,kBAAe;MAAG,UAAU;MAAI,eAAY;KAAQ,CAAA;KAC1F,kBACC,oBAAC,kBAAD;MACY;MACV,aAAa;MACL;MACR,OAAO,eAAe;MACN;KACjB,CAAA;KAEF,WACC,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACE,oBAAC,iBAAD;OAAiB,KAAK,OAAO;OAAW,MAAM;MAAW,CAAA,GACzD,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAa,UAAA;OAAiB,CAAA,GAC/C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;MACF,CAAA,CAAA;KAEL,CAAA,IAAA,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAU,UAAU;MAAsB,UAAU;MAArE,UAAA;OACG,aACC,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACE,oBAAC,SAAD;SAAS,SAAQ;SAAS,MAAM;SAAa,KAAK,OAAO;QAAc,CAAA,GACvE,oBAAC,MAAD;SAAM,KAAK,OAAO;SAAkB,UAAA;QAAgB,CAAA,CACjD;;OAEN,CAAC,aAAa,WACb,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACE,oBAAC,MAAD;SAAM,KAAK,OAAO;SAAY,UAAA;QAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;SAAM,KAAK,OAAO;SAAiB,UAAA;QAAsB,CAAA,CAC1E;;OAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;QAAmB,SAAA;QACjB,UAAA,oBAAC,oBAAD;SAAoB,OAAO;SAAM,cAAa;SAAK,eAAc;QAAM,CAAA;OACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;MACA;;KAEN;IACS;;EACkB,CAAA;CAEnB,CAAA;AAErB;AAUA,IAAM,oBAAoB,EACxB,UACA,gBACA,cAAc,aACd,QACA,YAC2B;CAC3B,MAAM,WAAW,OAAyB,IAAI;CAE9C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,OAAO,QAAQ,yBAAuB;EACtD,IAAI,CAAC,SAAS,SAAS,aAAa,YAAY,MAAM,QAAQ;EAC9D,MAAM,UAAU,SAAS;EACzB,IAAI,WAAW,YAAY,WAAW,QAAQ,SAAS,OAAO,GAAG;EACjE,MAAM,MAAM;CACd,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA;GACE,oBAAC,eAAD;IAAe,MAAM;IAAU,OAAM;GAAiB,CAAA;GACtD,oBAAC,OAAO,OAAR;IACE,cAAW;IACX,KAAK,OAAO;IACC;IACb,KAAK;IACE;IACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;IACrF,YAAY,UAAU;KAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;IAC/C;GACD,CAAA;GACA,SACC,oBAAC,OAAO,QAAR;IACE,MAAK;IACL,KAAK,OAAO;IACZ,cAAW;IACX,eAAe,eAAe,EAAE;IAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;GACf,CAAA;EAEd;;AAET"}
|
|
@@ -56,7 +56,7 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
56
56
|
content: {
|
|
57
57
|
borderRadius: "12";
|
|
58
58
|
boxShadow: "elevation/lg";
|
|
59
|
-
maxWidth:
|
|
59
|
+
maxWidth: `var(--drawer-floating-max-width, ${number}rem)`;
|
|
60
60
|
minWidth: `min(100%, ${number}rem)`;
|
|
61
61
|
};
|
|
62
62
|
header: {
|
|
@@ -81,11 +81,46 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
81
81
|
};
|
|
82
82
|
};
|
|
83
83
|
size: {
|
|
84
|
-
xxs: {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
xxs: {
|
|
85
|
+
content: {
|
|
86
|
+
'--drawer-floating-max-width': "100%";
|
|
87
|
+
width: {
|
|
88
|
+
tablet: `${number}rem`;
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
xs: {
|
|
93
|
+
content: {
|
|
94
|
+
'--drawer-floating-max-width': "100%";
|
|
95
|
+
width: {
|
|
96
|
+
tablet: `${number}rem`;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
sm: {
|
|
101
|
+
content: {
|
|
102
|
+
'--drawer-floating-max-width': "100%";
|
|
103
|
+
width: {
|
|
104
|
+
tablet: `${number}rem`;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
md: {
|
|
109
|
+
content: {
|
|
110
|
+
'--drawer-floating-max-width': "100%";
|
|
111
|
+
width: {
|
|
112
|
+
tablet: `${number}rem`;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
lg: {
|
|
117
|
+
content: {
|
|
118
|
+
'--drawer-floating-max-width': "100%";
|
|
119
|
+
width: {
|
|
120
|
+
tablet: `${number}rem`;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
};
|
|
89
124
|
};
|
|
90
125
|
}>;
|
|
91
126
|
export default drawerSlotRecipe;
|
|
@@ -135,7 +135,7 @@ var drawerSlotRecipe = defineSlotRecipe({
|
|
|
135
135
|
content: {
|
|
136
136
|
borderRadius: "12",
|
|
137
137
|
boxShadow: "elevation/lg",
|
|
138
|
-
maxWidth: rem(700)
|
|
138
|
+
maxWidth: `var(--drawer-floating-max-width, ${rem(700)})`,
|
|
139
139
|
minWidth: `min(100%, ${rem(480)})`
|
|
140
140
|
},
|
|
141
141
|
header: {
|
|
@@ -158,40 +158,28 @@ var drawerSlotRecipe = defineSlotRecipe({
|
|
|
158
158
|
}
|
|
159
159
|
},
|
|
160
160
|
size: {
|
|
161
|
-
xxs: {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
161
|
+
xxs: { content: {
|
|
162
|
+
"--drawer-floating-max-width": "100%",
|
|
163
|
+
width: { tablet: rem(320) }
|
|
164
|
+
} },
|
|
165
|
+
xs: { content: {
|
|
166
|
+
"--drawer-floating-max-width": "100%",
|
|
167
|
+
width: { tablet: rem(360) }
|
|
168
|
+
} },
|
|
169
|
+
sm: { content: {
|
|
170
|
+
"--drawer-floating-max-width": "100%",
|
|
171
|
+
width: { tablet: rem(480) }
|
|
172
|
+
} },
|
|
173
|
+
md: { content: {
|
|
174
|
+
"--drawer-floating-max-width": "100%",
|
|
175
|
+
width: { tablet: rem(640) }
|
|
176
|
+
} },
|
|
177
|
+
lg: { content: {
|
|
178
|
+
"--drawer-floating-max-width": "100%",
|
|
179
|
+
width: { tablet: rem(800) }
|
|
180
|
+
} }
|
|
166
181
|
}
|
|
167
182
|
},
|
|
168
|
-
compoundVariants: [...[
|
|
169
|
-
["xxs", 320],
|
|
170
|
-
["xs", 360],
|
|
171
|
-
["sm", 480],
|
|
172
|
-
["md", 640],
|
|
173
|
-
["lg", 800]
|
|
174
|
-
].map(([size, width]) => ({
|
|
175
|
-
css: { content: { width: {
|
|
176
|
-
base: "100vw",
|
|
177
|
-
tablet: rem(width)
|
|
178
|
-
} } },
|
|
179
|
-
size,
|
|
180
|
-
variant: "docked"
|
|
181
|
-
})), ...[
|
|
182
|
-
["xxs", 480],
|
|
183
|
-
["xs", 480],
|
|
184
|
-
["sm", 480],
|
|
185
|
-
["md", 640],
|
|
186
|
-
["lg", 800]
|
|
187
|
-
].map(([size, width]) => ({
|
|
188
|
-
css: { content: {
|
|
189
|
-
maxWidth: "100%",
|
|
190
|
-
width: rem(width)
|
|
191
|
-
} },
|
|
192
|
-
size,
|
|
193
|
-
variant: "floating"
|
|
194
|
-
}))],
|
|
195
183
|
defaultVariants: { variant: "docked" }
|
|
196
184
|
});
|
|
197
185
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n className: 'drawer',\n slots: drawerAnatomy.keys(),\n base: {\n backdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationName: 'fade-in',\n animationDuration: 'slow',\n },\n _closed: {\n animationName: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n justifyContent: 'flex-end',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'background/primary',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n position: 'relative',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-right-full, fade-in',\n _rtl: 'slide-from-left-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-right-full, fade-out',\n _rtl: 'slide-to-left-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n header: {\n paddingBlockEnd: '8',\n paddingBlockStart: '24',\n paddingInline: '24',\n // A tab list in the header closes it off with its own baseline.\n '&:has([role=tablist])': {\n paddingBlockEnd: 0,\n },\n },\n body: {\n flex: '1',\n overflow: 'auto',\n },\n footer: {\n borderBlockStartColor: 'border/regular',\n borderBlockStartWidth: '1',\n paddingBlock: '12',\n },\n title: {\n color: 'text/tertiary',\n flex: '1',\n // The close button is absolutely positioned, so the title keeps clear of it.\n paddingInlineEnd: '48',\n textStyle: 'heading/h6',\n },\n description: {},\n closeTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n display: 'inline-flex',\n height: '40',\n justifyContent: 'center',\n position: 'absolute',\n width: '40',\n _hover: {\n backgroundColor: 'color/neutral/subtle',\n },\n _active: {\n backgroundColor: 'color/neutral/moderate',\n },\n },\n },\n variants: {\n variant: {\n // One inline padding for header, body and footer, so their content lines up: 16 on mobile, 24 from tablet.\n docked: {\n body: {\n padding: { base: '16', tablet: '24' },\n },\n closeTrigger: {\n insetEnd: rem(18),\n top: '12',\n },\n content: {\n width: { base: '100vw', tablet: rem(320) },\n },\n footer: {\n paddingInline: { base: '16', tablet: '24' },\n },\n header: {\n paddingInline: { base: '16', tablet: '24' },\n // Tabs sit 8px from the edge, so their baseline runs nearly full width.\n '& :has(> [role=tablist])': {\n marginInline: { base: '-8', tablet: '-16' },\n },\n },\n },\n floating: {\n body: {\n paddingBlockStart: '8',\n paddingInline: '24',\n '.chakra-drawer__header:has([role=tablist]) ~ &': {\n paddingBlockStart: '24',\n },\n },\n closeTrigger: {\n height: '32',\n insetEnd: '20',\n top: '20',\n width: '32',\n },\n positioner: {\n padding: '32',\n },\n content: {\n borderRadius: '12',\n boxShadow: 'elevation/lg',\n maxWidth: rem(700)
|
|
1
|
+
{"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n className: 'drawer',\n slots: drawerAnatomy.keys(),\n base: {\n backdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationName: 'fade-in',\n animationDuration: 'slow',\n },\n _closed: {\n animationName: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n justifyContent: 'flex-end',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'background/primary',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n position: 'relative',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-right-full, fade-in',\n _rtl: 'slide-from-left-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-right-full, fade-out',\n _rtl: 'slide-to-left-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n header: {\n paddingBlockEnd: '8',\n paddingBlockStart: '24',\n paddingInline: '24',\n // A tab list in the header closes it off with its own baseline.\n '&:has([role=tablist])': {\n paddingBlockEnd: 0,\n },\n },\n body: {\n flex: '1',\n overflow: 'auto',\n },\n footer: {\n borderBlockStartColor: 'border/regular',\n borderBlockStartWidth: '1',\n paddingBlock: '12',\n },\n title: {\n color: 'text/tertiary',\n flex: '1',\n // The close button is absolutely positioned, so the title keeps clear of it.\n paddingInlineEnd: '48',\n textStyle: 'heading/h6',\n },\n description: {},\n closeTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n display: 'inline-flex',\n height: '40',\n justifyContent: 'center',\n position: 'absolute',\n width: '40',\n _hover: {\n backgroundColor: 'color/neutral/subtle',\n },\n _active: {\n backgroundColor: 'color/neutral/moderate',\n },\n },\n },\n variants: {\n variant: {\n // One inline padding for header, body and footer, so their content lines up: 16 on mobile, 24 from tablet.\n docked: {\n body: {\n padding: { base: '16', tablet: '24' },\n },\n closeTrigger: {\n insetEnd: rem(18),\n top: '12',\n },\n content: {\n width: { base: '100vw', tablet: rem(320) },\n },\n footer: {\n paddingInline: { base: '16', tablet: '24' },\n },\n header: {\n paddingInline: { base: '16', tablet: '24' },\n // Tabs sit 8px from the edge, so their baseline runs nearly full width.\n '& :has(> [role=tablist])': {\n marginInline: { base: '-8', tablet: '-16' },\n },\n },\n },\n floating: {\n body: {\n paddingBlockStart: '8',\n paddingInline: '24',\n '.chakra-drawer__header:has([role=tablist]) ~ &': {\n paddingBlockStart: '24',\n },\n },\n closeTrigger: {\n height: '32',\n insetEnd: '20',\n top: '20',\n width: '32',\n },\n positioner: {\n padding: '32',\n },\n content: {\n borderRadius: '12',\n boxShadow: 'elevation/lg',\n // A size lifts this cap through the variable, which also reaches a responsive `variant`'s tablet-scoped rule.\n maxWidth: `var(--drawer-floating-max-width, ${rem(700)})`,\n // 480 is the floating drawer's smallest step, so xxs and xs land on it too; on narrow screens it gives way to the viewport.\n minWidth: `min(100%, ${rem(480)})`,\n },\n header: {\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInline: '24',\n '& :has(> [role=tablist])': {\n marginInline: '-16',\n },\n },\n footer: {\n borderBlockStartColor: 'transparent',\n borderBlockStartWidth: 0,\n paddingBlockEnd: '24',\n paddingBlockStart: '32',\n paddingInline: '24',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n },\n },\n // Plain variants rather than compounds, so a size also works with a responsive `variant`, which compound variants\n // never match. Widths apply from tablet up; below that the variant's own width stays (docked: full width,\n // floating: sized to content).\n size: {\n xxs: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(320) } } },\n xs: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(360) } } },\n sm: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(480) } } },\n md: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(640) } } },\n lg: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(800) } } },\n },\n },\n defaultVariants: {\n variant: 'docked',\n },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -959,7 +959,7 @@ declare const slotRecipes: {
|
|
|
959
959
|
content: {
|
|
960
960
|
borderRadius: "12";
|
|
961
961
|
boxShadow: "elevation/lg";
|
|
962
|
-
maxWidth:
|
|
962
|
+
maxWidth: `var(--drawer-floating-max-width, ${number}rem)`;
|
|
963
963
|
minWidth: `min(100%, ${number}rem)`;
|
|
964
964
|
};
|
|
965
965
|
header: {
|
|
@@ -984,11 +984,46 @@ declare const slotRecipes: {
|
|
|
984
984
|
};
|
|
985
985
|
};
|
|
986
986
|
size: {
|
|
987
|
-
xxs: {
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
987
|
+
xxs: {
|
|
988
|
+
content: {
|
|
989
|
+
'--drawer-floating-max-width': "100%";
|
|
990
|
+
width: {
|
|
991
|
+
tablet: `${number}rem`;
|
|
992
|
+
};
|
|
993
|
+
};
|
|
994
|
+
};
|
|
995
|
+
xs: {
|
|
996
|
+
content: {
|
|
997
|
+
'--drawer-floating-max-width': "100%";
|
|
998
|
+
width: {
|
|
999
|
+
tablet: `${number}rem`;
|
|
1000
|
+
};
|
|
1001
|
+
};
|
|
1002
|
+
};
|
|
1003
|
+
sm: {
|
|
1004
|
+
content: {
|
|
1005
|
+
'--drawer-floating-max-width': "100%";
|
|
1006
|
+
width: {
|
|
1007
|
+
tablet: `${number}rem`;
|
|
1008
|
+
};
|
|
1009
|
+
};
|
|
1010
|
+
};
|
|
1011
|
+
md: {
|
|
1012
|
+
content: {
|
|
1013
|
+
'--drawer-floating-max-width': "100%";
|
|
1014
|
+
width: {
|
|
1015
|
+
tablet: `${number}rem`;
|
|
1016
|
+
};
|
|
1017
|
+
};
|
|
1018
|
+
};
|
|
1019
|
+
lg: {
|
|
1020
|
+
content: {
|
|
1021
|
+
'--drawer-floating-max-width': "100%";
|
|
1022
|
+
width: {
|
|
1023
|
+
tablet: `${number}rem`;
|
|
1024
|
+
};
|
|
1025
|
+
};
|
|
1026
|
+
};
|
|
992
1027
|
};
|
|
993
1028
|
}>;
|
|
994
1029
|
emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
|