@kushagradhawan/kookie-ui 0.1.70 → 0.1.72
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/README.md +4 -0
- package/components.css +63 -380
- package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
- package/dist/cjs/components/_internal/base-button.js +1 -1
- package/dist/cjs/components/_internal/base-button.js.map +3 -3
- package/dist/cjs/components/_internal/shell-bottom.d.ts +2 -21
- package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-bottom.js +1 -1
- package/dist/cjs/components/_internal/shell-bottom.js.map +3 -3
- package/dist/cjs/components/_internal/shell-inspector.d.ts +10 -21
- package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-inspector.js +1 -1
- package/dist/cjs/components/_internal/shell-inspector.js.map +3 -3
- package/dist/cjs/components/_internal/shell-prop-helpers.d.ts +7 -0
- package/dist/cjs/components/_internal/shell-prop-helpers.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-prop-helpers.js +2 -0
- package/dist/cjs/components/_internal/shell-prop-helpers.js.map +7 -0
- package/dist/cjs/components/_internal/shell-sidebar.d.ts +4 -21
- package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
- package/dist/cjs/components/_internal/shell-sidebar.js.map +3 -3
- package/dist/cjs/components/button.d.ts.map +1 -1
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +3 -3
- package/dist/cjs/components/chatbar.d.ts +11 -2
- package/dist/cjs/components/chatbar.d.ts.map +1 -1
- package/dist/cjs/components/chatbar.js +1 -1
- package/dist/cjs/components/chatbar.js.map +3 -3
- package/dist/cjs/components/icon-button.d.ts.map +1 -1
- package/dist/cjs/components/icon-button.js +2 -2
- package/dist/cjs/components/icon-button.js.map +3 -3
- package/dist/cjs/components/schemas/shell.schema.d.ts +70 -70
- package/dist/cjs/components/shell.context.d.ts +1 -0
- package/dist/cjs/components/shell.context.d.ts.map +1 -1
- package/dist/cjs/components/shell.context.js.map +2 -2
- package/dist/cjs/components/shell.d.ts +6 -26
- package/dist/cjs/components/shell.d.ts.map +1 -1
- package/dist/cjs/components/shell.hooks.d.ts +19 -2
- package/dist/cjs/components/shell.hooks.d.ts.map +1 -1
- package/dist/cjs/components/shell.hooks.js +1 -1
- package/dist/cjs/components/shell.hooks.js.map +3 -3
- package/dist/cjs/components/shell.js +1 -1
- package/dist/cjs/components/shell.js.map +3 -3
- package/dist/cjs/components/shell.types.d.ts +21 -0
- package/dist/cjs/components/shell.types.d.ts.map +1 -1
- package/dist/cjs/components/shell.types.js +1 -1
- package/dist/cjs/components/shell.types.js.map +2 -2
- package/dist/cjs/components/toggle-button.d.ts.map +1 -1
- package/dist/cjs/components/toggle-button.js +1 -1
- package/dist/cjs/components/toggle-button.js.map +3 -3
- package/dist/cjs/components/toggle-icon-button.d.ts.map +1 -1
- package/dist/cjs/components/toggle-icon-button.js +1 -1
- package/dist/cjs/components/toggle-icon-button.js.map +3 -3
- package/dist/cjs/hooks/index.d.ts +2 -0
- package/dist/cjs/hooks/index.d.ts.map +1 -1
- package/dist/cjs/hooks/index.js +1 -1
- package/dist/cjs/hooks/index.js.map +3 -3
- package/dist/cjs/hooks/use-live-announcer.d.ts.map +1 -1
- package/dist/cjs/hooks/use-live-announcer.js +2 -2
- package/dist/cjs/hooks/use-live-announcer.js.map +3 -3
- package/dist/cjs/hooks/use-toggle-state.d.ts +37 -0
- package/dist/cjs/hooks/use-toggle-state.d.ts.map +1 -0
- package/dist/cjs/hooks/use-toggle-state.js +2 -0
- package/dist/cjs/hooks/use-toggle-state.js.map +7 -0
- package/dist/cjs/hooks/use-tooltip-wrapper.d.ts +29 -0
- package/dist/cjs/hooks/use-tooltip-wrapper.d.ts.map +1 -0
- package/dist/cjs/hooks/use-tooltip-wrapper.js +2 -0
- package/dist/cjs/hooks/use-tooltip-wrapper.js.map +7 -0
- package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
- package/dist/esm/components/_internal/base-button.js +1 -1
- package/dist/esm/components/_internal/base-button.js.map +3 -3
- package/dist/esm/components/_internal/shell-bottom.d.ts +2 -21
- package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-bottom.js +1 -1
- package/dist/esm/components/_internal/shell-bottom.js.map +3 -3
- package/dist/esm/components/_internal/shell-inspector.d.ts +10 -21
- package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-inspector.js +1 -1
- package/dist/esm/components/_internal/shell-inspector.js.map +3 -3
- package/dist/esm/components/_internal/shell-prop-helpers.d.ts +7 -0
- package/dist/esm/components/_internal/shell-prop-helpers.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-prop-helpers.js +2 -0
- package/dist/esm/components/_internal/shell-prop-helpers.js.map +7 -0
- package/dist/esm/components/_internal/shell-sidebar.d.ts +4 -21
- package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-sidebar.js +1 -1
- package/dist/esm/components/_internal/shell-sidebar.js.map +3 -3
- package/dist/esm/components/button.d.ts.map +1 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +3 -3
- package/dist/esm/components/chatbar.d.ts +11 -2
- package/dist/esm/components/chatbar.d.ts.map +1 -1
- package/dist/esm/components/chatbar.js +1 -1
- package/dist/esm/components/chatbar.js.map +3 -3
- package/dist/esm/components/icon-button.d.ts.map +1 -1
- package/dist/esm/components/icon-button.js +2 -2
- package/dist/esm/components/icon-button.js.map +3 -3
- package/dist/esm/components/schemas/shell.schema.d.ts +70 -70
- package/dist/esm/components/shell.context.d.ts +1 -0
- package/dist/esm/components/shell.context.d.ts.map +1 -1
- package/dist/esm/components/shell.context.js.map +2 -2
- package/dist/esm/components/shell.d.ts +6 -26
- package/dist/esm/components/shell.d.ts.map +1 -1
- package/dist/esm/components/shell.hooks.d.ts +19 -2
- package/dist/esm/components/shell.hooks.d.ts.map +1 -1
- package/dist/esm/components/shell.hooks.js +1 -1
- package/dist/esm/components/shell.hooks.js.map +3 -3
- package/dist/esm/components/shell.js +1 -1
- package/dist/esm/components/shell.js.map +3 -3
- package/dist/esm/components/shell.types.d.ts +21 -0
- package/dist/esm/components/shell.types.d.ts.map +1 -1
- package/dist/esm/components/shell.types.js.map +2 -2
- package/dist/esm/components/toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button.js +1 -1
- package/dist/esm/components/toggle-button.js.map +3 -3
- package/dist/esm/components/toggle-icon-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-icon-button.js +1 -1
- package/dist/esm/components/toggle-icon-button.js.map +3 -3
- package/dist/esm/hooks/index.d.ts +2 -0
- package/dist/esm/hooks/index.d.ts.map +1 -1
- package/dist/esm/hooks/index.js +1 -1
- package/dist/esm/hooks/index.js.map +3 -3
- package/dist/esm/hooks/use-live-announcer.d.ts.map +1 -1
- package/dist/esm/hooks/use-live-announcer.js +2 -2
- package/dist/esm/hooks/use-live-announcer.js.map +3 -3
- package/dist/esm/hooks/use-toggle-state.d.ts +37 -0
- package/dist/esm/hooks/use-toggle-state.d.ts.map +1 -0
- package/dist/esm/hooks/use-toggle-state.js +2 -0
- package/dist/esm/hooks/use-toggle-state.js.map +7 -0
- package/dist/esm/hooks/use-tooltip-wrapper.d.ts +29 -0
- package/dist/esm/hooks/use-tooltip-wrapper.d.ts.map +1 -0
- package/dist/esm/hooks/use-tooltip-wrapper.js +2 -0
- package/dist/esm/hooks/use-tooltip-wrapper.js.map +7 -0
- package/package.json +4 -4
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/_internal/base-button.css +136 -614
- package/src/components/_internal/base-button.tsx +15 -13
- package/src/components/_internal/shell-bottom.tsx +305 -321
- package/src/components/_internal/shell-inspector.tsx +310 -320
- package/src/components/_internal/shell-prop-helpers.ts +53 -0
- package/src/components/_internal/shell-sidebar.tsx +370 -384
- package/src/components/button.tsx +13 -42
- package/src/components/chatbar.tsx +7 -3
- package/src/components/icon-button.tsx +20 -44
- package/src/components/image.css +10 -8
- package/src/components/shell.context.tsx +1 -0
- package/src/components/shell.hooks.ts +67 -2
- package/src/components/shell.tsx +199 -209
- package/src/components/shell.types.ts +23 -0
- package/src/components/toggle-button.tsx +30 -59
- package/src/components/toggle-icon-button.tsx +29 -51
- package/src/hooks/index.ts +2 -0
- package/src/hooks/use-live-announcer.ts +34 -7
- package/src/hooks/use-toggle-state.ts +72 -0
- package/src/hooks/use-tooltip-wrapper.ts +28 -0
- package/src/styles/tokens/color.css +11 -1
- package/styles.css +70 -381
- package/tokens/base.css +7 -1
- package/tokens.css +7 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQ5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAErE;;;;GAIG;AACH,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,0DAA0D;IAC1D,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,kBAAkB,GACpB,WAAW,GACX,qBAAqB,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;AAE/F;;GAEG;AACH,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQ5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAErE;;;;GAIG;AACH,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,0DAA0D;IAC1D,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,kBAAkB,GACpB,WAAW,GACX,qBAAqB,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;AAE/F;;GAEG;AACH,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,UAAU,2FA8Kd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var U=Object.create;var l=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var X=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},v=(e,n,s,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of J(n))!Q.call(e,o)&&o!==s&&l(e,o,{get:()=>n[o],enumerable:!(u=q(n,o))||u.enumerable});return e};var w=(e,n,s)=>(s=e!=null?U(K(e)):{},v(n||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),Y=e=>v(l({},"__esModule",{value:!0}),e);var Z={};X(Z,{BaseButton:()=>b});module.exports=Y(Z);var t=w(require("react")),C=w(require("classnames")),x=require("radix-ui"),y=require("./base-button.props.js"),E=require("../flex.js"),M=require("../spinner.js"),k=require("../visually-hidden.js"),D=require("../../helpers/extract-props.js"),p=require("../../helpers/map-prop-values.js"),S=require("../../props/margin.props.js");const b=t.forwardRef((e,n)=>{const{size:s=y.baseButtonPropDefs.size.default}=e,{className:u,children:o,asChild:d,as:i,color:z,radius:I,material:N,panelBackground:j,flush:O,disabled:B=e.loading,...P}=(0,D.extractProps)(e,y.baseButtonPropDefs,S.marginPropDefs);t.useEffect(()=>{e.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[e.panelBackground]);const a=N??j,g=t.useRef(null),h=t.useRef(a);h.current=a,t.useEffect(()=>{const r=g.current;if(!r)return;if(a==="translucent"){r.style.setProperty("will-change","backdrop-filter");let f;const $=()=>{const A=getComputedStyle(r).getPropertyValue("--duration-2")||"75ms",L=parseInt(A)||75;f=setTimeout(()=>{r&&h.current!=="translucent"&&r.style.setProperty("will-change","auto")},L)},T=new MutationObserver($);return T.observe(r,{attributes:!0,attributeFilter:["data-material"]}),()=>{f&&clearTimeout(f),T.disconnect(),r.style.setProperty("will-change","auto")}}else r.style.setProperty("will-change","auto")},[a]);const V=d?x.Slot.Root:i||"button",F=d||!i||["button","input","textarea","select"].includes(i),H=!d&&(!i||i==="button"),R="type"in P,W=t.useId(),c=e.loading?`${W}-loading`:void 0,m=t.useMemo(()=>typeof o=="string"?o:t.isValidElement(o)&&typeof o.props?.children=="string"?o.props.children:"button",[o]),G=t.useMemo(()=>e.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":c,"aria-label":`${m} (loading)`}:{},[e.loading,c,m]);return t.createElement(V,{"data-disabled":B||void 0,"data-accent-color":z,"data-radius":I,"data-material":a,"data-panel-background":a,"data-flush":O?"true":void 0,...P,...G,ref:r=>{typeof n=="function"?n(r):n&&(n.current=r),g.current=r},className:(0,C.default)("rt-reset","rt-BaseButton",u),...F&&{disabled:B},...H&&!R?{type:"button"}:{}},e.loading?t.createElement(t.Fragment,null,t.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},o),t.createElement(k.VisuallyHidden,null,t.createElement("span",{id:c},m," is loading, please wait..."),o),t.createElement(E.Flex,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},t.createElement("span",null,t.createElement(M.Spinner,{size:(0,p.mapResponsiveProp)(s,p.mapButtonSizeToSpinnerSize),"aria-hidden":"true"})))):o)});b.displayName="BaseButton";
|
|
2
2
|
//# sourceMappingURL=base-button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/_internal/base-button.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { baseButtonPropDefs } from './base-button.props.js';\nimport { Flex } from '../flex.js';\nimport { Spinner } from '../spinner.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { extractProps } from '../../helpers/extract-props.js';\nimport { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';\nimport { marginPropDefs } from '../../props/margin.props.js';\n\nimport type { MarginProps } from '../../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../../props/prop-def.js';\n\ntype BaseButtonElement = React.ElementRef<'button'>;\ntype BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;\n\n/**\n * Polymorphic BaseButton props that support rendering as different HTML elements\n * Uses the proper ComponentPropsWithout pattern for type safety\n * @template C - The element type to render as (defaults to 'button')\n */\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n /** Element type to render as (e.g., 'a', 'span', etc.) */\n as?: C;\n} & BaseButtonOwnProps &\n MarginProps &\n ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\n/**\n * BaseButton props interface that combines all available props\n */\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\n/**\n * BaseButton component that provides the core button functionality\n *\n * This is the foundational button component that handles all the complex logic\n * including loading states, accessibility, performance optimizations, and\n * polymorphic rendering. It's used by Button, IconButton, and other button\n * variants to ensure consistent behavior across the design system.\n *\n * Key features:\n * - Loading state with spinner and accessibility announcements\n * - Performance optimizations for backdrop-filter effects\n * - Comprehensive accessibility support\n * - Polymorphic rendering support\n * - Material/panel background handling\n *\n * @example\n * ```tsx\n * // Basic usage\n * <BaseButton>Click me</BaseButton>\n *\n * // With loading state\n * <BaseButton loading>Processing...</BaseButton>\n *\n * // Polymorphic rendering\n * <BaseButton as=\"a\" href=\"/link\">Link Button</BaseButton>\n * ```\n */\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n const { size = baseButtonPropDefs.size.default } = props;\n\n // Extract button-specific props from the combined props object\n const {\n className,\n children,\n asChild,\n as,\n color,\n radius,\n material,\n panelBackground,\n flush,\n disabled = props.loading, // Loading state automatically disables the button\n ...baseButtonProps\n } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n // Show deprecation warning for panelBackground when used\n // This helps developers migrate to the new material prop\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAqB,oBAErBC,EAAmC,kCACnCC,EAAqB,sBACrBC,EAAwB,yBACxBC,EAA+B,iCAC/BC,EAA6B,0CAC7BC,EAA8D,4CAC9DC,EAA+B,uCAqD/B,MAAMX,EAAaE,EAAM,WAA+C,CAACU,EAAOC,IAAiB,CAC/F,KAAM,CAAE,KAAAC,EAAO,qBAAmB,KAAK,OAAQ,EAAIF,EAG7C,CACJ,UAAAG,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,SAAAC,EAAWZ,EAAM,QACjB,GAAGa,CACL,KAAI,gBAAab,EAAO,qBAAoB,gBAAc,EAI1DV,EAAM,UAAU,IAAM,CAChBU,EAAM,kBAAoB,QAC5B,QAAQ,
|
|
6
|
-
"names": ["base_button_exports", "__export", "BaseButton", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_base_button_props", "import_flex", "import_spinner", "import_visually_hidden", "import_extract_props", "import_map_prop_values", "import_margin_props", "props", "forwardedRef", "size", "className", "children", "asChild", "as", "color", "radius", "material", "panelBackground", "flush", "disabled", "baseButtonProps", "effectiveMaterial", "buttonRef", "button", "cleanup", "transitionDuration", "duration", "observer", "Comp", "shouldPassDisabled", "isNativeButtonElement", "hasExplicitTypeAttribute", "loadingId", "describedById", "buttonText", "accessibilityProps", "node", "classNames"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { baseButtonPropDefs } from './base-button.props.js';\nimport { Flex } from '../flex.js';\nimport { Spinner } from '../spinner.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { extractProps } from '../../helpers/extract-props.js';\nimport { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';\nimport { marginPropDefs } from '../../props/margin.props.js';\n\nimport type { MarginProps } from '../../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../../props/prop-def.js';\n\ntype BaseButtonElement = React.ElementRef<'button'>;\ntype BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;\n\n/**\n * Polymorphic BaseButton props that support rendering as different HTML elements\n * Uses the proper ComponentPropsWithout pattern for type safety\n * @template C - The element type to render as (defaults to 'button')\n */\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n /** Element type to render as (e.g., 'a', 'span', etc.) */\n as?: C;\n} & BaseButtonOwnProps &\n MarginProps &\n ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\n/**\n * BaseButton props interface that combines all available props\n */\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\n/**\n * BaseButton component that provides the core button functionality\n *\n * This is the foundational button component that handles all the complex logic\n * including loading states, accessibility, performance optimizations, and\n * polymorphic rendering. It's used by Button, IconButton, and other button\n * variants to ensure consistent behavior across the design system.\n *\n * Key features:\n * - Loading state with spinner and accessibility announcements\n * - Performance optimizations for backdrop-filter effects\n * - Comprehensive accessibility support\n * - Polymorphic rendering support\n * - Material/panel background handling\n *\n * @example\n * ```tsx\n * // Basic usage\n * <BaseButton>Click me</BaseButton>\n *\n * // With loading state\n * <BaseButton loading>Processing...</BaseButton>\n *\n * // Polymorphic rendering\n * <BaseButton as=\"a\" href=\"/link\">Link Button</BaseButton>\n * ```\n */\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n const { size = baseButtonPropDefs.size.default } = props;\n\n // Extract button-specific props from the combined props object\n const {\n className,\n children,\n asChild,\n as,\n color,\n radius,\n material,\n panelBackground,\n flush,\n disabled = props.loading, // Loading state automatically disables the button\n ...baseButtonProps\n } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n // Show deprecation warning for panelBackground when used\n // This helps developers migrate to the new material prop\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn('Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.');\n }\n }, [props.panelBackground]);\n\n // Material takes precedence over panelBackground for backward compatibility\n const effectiveMaterial = material ?? panelBackground;\n\n // Will-change cleanup for backdrop-filter performance optimization\n // This prevents layout thrashing when using translucent materials\n const buttonRef = React.useRef<HTMLElement>(null);\n\n // Use a ref to track current material value to avoid stale closures in setTimeout\n const materialRef = React.useRef(effectiveMaterial);\n materialRef.current = effectiveMaterial;\n\n React.useEffect(() => {\n const button = buttonRef.current;\n if (!button) return;\n\n const hasTranslucentMaterial = effectiveMaterial === 'translucent';\n\n if (hasTranslucentMaterial) {\n // Add will-change when material is translucent to optimize rendering\n button.style.setProperty('will-change', 'backdrop-filter');\n\n // Track timeout for cleanup\n let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n // Clean up will-change after transition completes to prevent memory leaks\n const cleanup = () => {\n const transitionDuration = getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';\n const duration = parseInt(transitionDuration) || 75;\n\n timeoutId = setTimeout(() => {\n // Use ref to get current value, not stale closure value\n if (button && materialRef.current !== 'translucent') {\n button.style.setProperty('will-change', 'auto');\n }\n }, duration);\n };\n\n // Listen for material changes to clean up will-change property\n const observer = new MutationObserver(cleanup);\n observer.observe(button, { attributes: true, attributeFilter: ['data-material'] });\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n observer.disconnect();\n button.style.setProperty('will-change', 'auto');\n };\n } else {\n // Remove will-change when material is not translucent\n button.style.setProperty('will-change', 'auto');\n }\n }, [effectiveMaterial]);\n\n // asChild takes precedence over as prop for Radix Slot integration\n const Comp = asChild ? Slot.Root : as || 'button';\n\n // Only pass disabled for elements that support it\n // This prevents invalid HTML attributes on unsupported elements\n const shouldPassDisabled = asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);\n\n // Determine if we are rendering a real <button> element so we can set a safe\n // default type. Native <button> defaults to type=\"submit\" which can cause\n // accidental form submissions. We default to type=\"button\" unless the user\n // explicitly provided a type or we're using asChild (unknown underlying node).\n const isNativeButtonElement = !asChild && (!as || as === 'button');\n const hasExplicitTypeAttribute = 'type' in (baseButtonProps as Record<string, unknown>);\n\n // Generate unique ID for loading announcements\n const loadingId = React.useId();\n const describedById = props.loading ? `${loadingId}-loading` : undefined;\n\n // Extract button text for accessibility announcements\n const buttonText = React.useMemo(() => {\n if (typeof children === 'string') return children;\n if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n return (children.props as any).children;\n }\n return 'button';\n }, [children]);\n\n // Enhanced accessibility props for loading state\n // These ensure screen readers announce the loading state properly\n const accessibilityProps = React.useMemo(() => {\n if (props.loading) {\n return {\n 'aria-busy': true,\n 'aria-disabled': true,\n 'aria-describedby': describedById,\n 'aria-label': `${buttonText} (loading)`,\n };\n }\n return {};\n }, [props.loading, describedById, buttonText]);\n\n return (\n <Comp\n // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`\n data-disabled={disabled || undefined}\n data-accent-color={color}\n data-radius={radius}\n data-material={effectiveMaterial}\n data-panel-background={effectiveMaterial}\n data-flush={flush ? 'true' : undefined}\n {...baseButtonProps}\n {...accessibilityProps}\n ref={(node) => {\n // Handle both forwarded ref and internal ref for performance optimization\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n forwardedRef.current = node;\n }\n buttonRef.current = node;\n }}\n className={classNames('rt-reset', 'rt-BaseButton', className)}\n {...(shouldPassDisabled && { disabled })}\n {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}\n >\n {props.loading ? (\n <>\n {/**\n * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.\n * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.\n *\n * However, `display: contents` removes the content from the accessibility tree in some browsers,\n * so we force remove it with `aria-hidden` and re-add it in the tree with `VisuallyHidden`\n */}\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n\n {/* Enhanced accessibility for loading state */}\n <VisuallyHidden>\n <span id={describedById}>{buttonText} is loading, please wait...</span>\n {children}\n </VisuallyHidden>\n\n {/* Centered spinner overlay during loading state */}\n <Flex asChild align=\"center\" justify=\"center\" position=\"absolute\" inset=\"0\">\n <span>\n <Spinner size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} aria-hidden=\"true\" />\n </span>\n </Flex>\n </>\n ) : (\n children\n )}\n </Comp>\n );\n});\nBaseButton.displayName = 'BaseButton';\n\nexport { BaseButton };\nexport type { BaseButtonProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["base_button_exports", "__export", "BaseButton", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_base_button_props", "import_flex", "import_spinner", "import_visually_hidden", "import_extract_props", "import_map_prop_values", "import_margin_props", "props", "forwardedRef", "size", "className", "children", "asChild", "as", "color", "radius", "material", "panelBackground", "flush", "disabled", "baseButtonProps", "effectiveMaterial", "buttonRef", "materialRef", "button", "timeoutId", "cleanup", "transitionDuration", "duration", "observer", "Comp", "shouldPassDisabled", "isNativeButtonElement", "hasExplicitTypeAttribute", "loadingId", "describedById", "buttonText", "accessibilityProps", "node", "classNames"]
|
|
7
7
|
}
|
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { BottomHandle } from './shell-handles.js';
|
|
3
|
-
import type { Breakpoint,
|
|
4
|
-
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
-
presentation?: ResponsivePresentation;
|
|
6
|
-
expandedSize?: number;
|
|
7
|
-
minSize?: number;
|
|
8
|
-
maxSize?: number;
|
|
9
|
-
resizable?: boolean;
|
|
10
|
-
collapsible?: boolean;
|
|
11
|
-
onExpand?: () => void;
|
|
12
|
-
onCollapse?: () => void;
|
|
13
|
-
onResize?: (size: number) => void;
|
|
14
|
-
resizer?: React.ReactNode;
|
|
15
|
-
onResizeStart?: (size: number) => void;
|
|
16
|
-
onResizeEnd?: (size: number) => void;
|
|
17
|
-
snapPoints?: number[];
|
|
18
|
-
snapTolerance?: number;
|
|
19
|
-
collapseThreshold?: number;
|
|
20
|
-
paneId?: string;
|
|
21
|
-
persistence?: PaneSizePersistence;
|
|
22
|
-
}
|
|
3
|
+
import type { Breakpoint, PaneBaseProps } from '../shell.types.js';
|
|
23
4
|
type BottomOpenChangeMeta = {
|
|
24
5
|
reason: 'init' | 'toggle' | 'responsive';
|
|
25
6
|
};
|
|
@@ -44,7 +25,7 @@ type BottomSizeUncontrolledProps = {
|
|
|
44
25
|
type BottomSizeChangeMeta = {
|
|
45
26
|
reason: 'init' | 'resize' | 'controlled';
|
|
46
27
|
};
|
|
47
|
-
type BottomPublicProps =
|
|
28
|
+
type BottomPublicProps = PaneBaseProps & (BottomControlledProps | BottomUncontrolledProps) & (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {
|
|
48
29
|
onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;
|
|
49
30
|
sizeUpdate?: 'throttle' | 'debounce';
|
|
50
31
|
sizeUpdateMs?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG1H,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,qBAAqB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC/K,KAAK,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC3I,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAChF,KAAK,2BAA2B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,iBAAiB,GAAG,aAAa,GACpC,CAAC,qBAAqB,GAAG,uBAAuB,CAAC,GACjD,CAAC,yBAAyB,GAAG,2BAA2B,CAAC,GAAG;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,KAAK,eAAe,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,YAAY,CAAA;CAAE,CAAC;AAgBlJ,eAAO,MAAM,MAAM,EA8Tb,eAAe,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var ye=Object.create;var
|
|
1
|
+
"use strict";var ye=Object.create;var g=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var Se=Object.getPrototypeOf,Be=Object.prototype.hasOwnProperty;var Me=(s,a)=>{for(var l in a)g(s,l,{get:a[l],enumerable:!0})},Q=(s,a,l,z)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of Pe(a))!Be.call(s,d)&&d!==l&&g(s,d,{get:()=>a[d],enumerable:!(z=ze(a,d))||z.enumerable});return s};var V=(s,a,l)=>(l=s!=null?ye(Se(s)):{},Q(a||!s||!s.__esModule?g(l,"default",{value:s,enumerable:!0}):l,s)),ge=s=>Q(g({},"__esModule",{value:!0}),s);var Ce={};Me(Ce,{Bottom:()=>U});module.exports=ge(Ce);var t=V(require("react")),X=V(require("classnames")),F=V(require("../sheet.js")),Z=require("../visually-hidden.js"),ee=require("../shell.context.js"),x=require("../shell.hooks.js"),te=require("./shell-resize.js"),b=require("./shell-handles.js"),ve=require("../shell.types.js"),y=require("./shell-prop-helpers.js");const xe=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style"],U=t.forwardRef((s,a)=>{const{className:l,presentation:z="fixed",defaultOpen:d,open:p,onOpenChange:h,expandedSize:C=200,minSize:m=100,maxSize:c=400,resizable:R=!1,collapsible:oe=!0,onExpand:I,onCollapse:_,onResize:v,onResizeStart:ne,onResizeEnd:re,snapPoints:ie,snapTolerance:se,collapseThreshold:ae,paneId:E,persistence:N,children:le,style:de,size:$,defaultSize:L,onSizeChange:A,sizeUpdate:j,sizeUpdateMs:W=50}=s,pe=(0,y.extractPaneDomProps)(s,xe),r=(0,ee.useShell)(),O=(0,x.useResponsivePresentation)(z),P=O==="overlay",ue=O==="stacked",u=t.useRef(null),me=t.useCallback(e=>{u.current=e,typeof a=="function"?a(e):a&&(a.current=e)},[a]),q=t.Children.toArray(le),K=q.filter(e=>t.isValidElement(e)&&e.type===b.BottomHandle),Y=q.filter(e=>!(t.isValidElement(e)&&e.type===b.BottomHandle)),ce=t.useMemo(()=>(0,y.mapResponsiveBooleanToPaneMode)(p),[p]),fe=t.useMemo(()=>(0,y.mapResponsiveBooleanToPaneMode)(d),[d]),be=typeof p=="object"&&p!==null;(0,x.useResponsiveInitialState)({controlledValue:ce,defaultValue:fe,currentValue:r.bottomMode,setValue:r.setBottomMode,breakpointReady:r.currentBreakpointReady,controlledIsResponsive:be,onResponsiveChange:e=>h?.(e==="expanded",{reason:"responsive"}),onInit:e=>{typeof p>"u"&&h?.(e==="expanded",{reason:"init"})}});const S=t.useMemo(()=>{const e=A,n=j,i=W??50;if(!e)return()=>{};if(n==="debounce"){let o=null;return(f,H)=>{o&&clearTimeout(o),o=setTimeout(()=>{e(f,H)},i)}}if(n==="throttle"){let o=0;return(f,H)=>{const J=Date.now();J-o>=i&&(o=J,e(f,H))}}return(o,f)=>e(o,f)},[A,j,W]),B=t.useRef(null);t.useEffect(()=>{const e=typeof p<"u";if(B.current===null){B.current=e;return}B.current!==e&&(console.warn("Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported."),B.current=e)},[p]);const G=t.useRef(!1),w=t.useRef(null);t.useEffect(()=>{!G.current&&typeof p>"u"&&d&&r.bottomMode==="expanded"&&(h?.(!0,{reason:"init"}),G.current=!0),typeof p>"u"&&(w.current!==null&&w.current!==r.bottomMode&&h?.(r.bottomMode==="expanded",{reason:"toggle"}),w.current=r.bottomMode)},[r.bottomMode,p,d,h]),t.useEffect(()=>{r.bottomMode==="expanded"?I?.():_?.()},[r.bottomMode,I,_]);const T=r.bottomMode==="expanded",M=t.useMemo(()=>{if(!E||N)return N;const e=`kookie-ui:shell:bottom:${E}`;return{load:()=>{if(!(typeof window>"u"))try{const i=window.localStorage.getItem(e);return i?Number(i):void 0}catch{return}},save:i=>{if(!(typeof window>"u"))try{window.localStorage.setItem(e,String(i))}catch{}}}},[E,N]);t.useEffect(()=>{let e=!0;if(!R||!M?.load||P)return;const n=M.load(),i=o=>{!e||typeof o!="number"||!u.current||(u.current.style.setProperty("--bottom-size",`${o}px`),v?.(o))};return n instanceof Promise?n.then(i).catch(o=>{}):i(n),()=>{e=!1}},[R,M,v,P]);const he=R&&!P&&T?t.createElement(te.PaneResizeContext.Provider,{value:{containerRef:u,cssVarName:"--bottom-size",minSize:m,maxSize:c,defaultSize:C,orientation:"horizontal",edge:"start",computeNext:(e,n,i)=>{const o=e-n;return i-o},onResize:v,onResizeStart:ne,onResizeEnd:e=>{re?.(e),S(e,{reason:"resize"}),M?.save?.(e)},target:"bottom",collapsible:oe,snapPoints:ie,snapTolerance:se??8,collapseThreshold:ae,requestCollapse:()=>r.setBottomMode("collapsed"),requestToggle:()=>r.togglePane("bottom")}},K.length>0?K.map((e,n)=>t.cloneElement(e,{key:e.key??n})):t.createElement(b.PaneHandle,null)):null,k=t.useCallback(e=>{if(e==null)return;if(typeof e=="number"&&Number.isFinite(e))return e;const n=String(e).trim();if(!n)return;if(n.endsWith("px"))return Number.parseFloat(n);if(n.endsWith("rem")){const o=Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16")||16;return Number.parseFloat(n)*o}if(n.endsWith("%")){const o=Number.parseFloat(n),f=document.documentElement.clientHeight||window.innerHeight||0;return o/100*f}const i=Number.parseFloat(n);return Number.isFinite(i)?i:void 0},[]);t.useEffect(()=>{if(u.current&&typeof $>"u"&&typeof L<"u"){const e=k(L);if(typeof e=="number"&&Number.isFinite(e)){const o=Math.min((typeof c=="number"?c:void 0)??e,Math.max((typeof m=="number"?m:void 0)??e,e));u.current.style.setProperty("--bottom-size",`${o}px`),S(o,{reason:"init"})}}},[]);const D=$;if(t.useEffect(()=>{if(!u.current||typeof D>"u")return;const e=k(D);if(typeof e=="number"&&Number.isFinite(e)){const o=Math.min((typeof c=="number"?c:void 0)??e,Math.max((typeof m=="number"?m:void 0)??e,e));u.current.style.setProperty("--bottom-size",`${o}px`),S(o,{reason:"controlled"})}},[D,m,c,k,S]),P){const e=r.bottomMode==="expanded";return t.createElement(F.Root,{open:e,onOpenChange:n=>r.setBottomMode(n?"expanded":"collapsed")},t.createElement(F.Content,{side:"bottom",style:{padding:0},height:{initial:`${C}px`}},t.createElement(Z.VisuallyHidden,null,t.createElement(F.Title,null,"Bottom panel")),Y))}return t.createElement("div",{...pe,ref:me,className:(0,X.default)("rt-ShellBottom",l),"data-mode":r.bottomMode,"data-peek":r.peekTarget==="bottom"||void 0,"data-presentation":r.currentBreakpointReady?O:void 0,"data-open":r.currentBreakpointReady&&ue&&T||void 0,style:{...de,"--bottom-size":`${C}px`,"--bottom-min-size":`${m}px`,"--bottom-max-size":`${c}px`}},t.createElement("div",{className:"rt-ShellBottomContent","data-visible":T||void 0},Y),he)});U.displayName="Shell.Bottom",U.Handle=b.BottomHandle;
|
|
2
2
|
//# sourceMappingURL=shell-bottom.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/_internal/shell-bottom.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { BottomHandle, PaneHandle } from './shell-handles.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';\n\ninterface PaneProps extends React.ComponentPropsWithoutRef<'div'> {\n presentation?: ResponsivePresentation;\n // legacy mode removed\n expandedSize?: number;\n minSize?: number;\n maxSize?: number;\n resizable?: boolean;\n collapsible?: boolean;\n onExpand?: () => void;\n onCollapse?: () => void;\n onResize?: (size: number) => void;\n resizer?: React.ReactNode;\n onResizeStart?: (size: number) => void;\n onResizeEnd?: (size: number) => void;\n snapPoints?: number[];\n snapTolerance?: number;\n collapseThreshold?: number;\n paneId?: string;\n persistence?: PaneSizePersistence;\n}\n\ntype BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };\ntype BottomUncontrolledProps = { defaultOpen?: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };\ntype BottomSizeControlledProps = { size: number | string; defaultSize?: never };\ntype BottomSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype BottomSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };\ntype BottomPublicProps = PaneProps &\n (BottomControlledProps | BottomUncontrolledProps) &\n (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {\n onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n };\n\ntype BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };\n\nexport const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(\n (\n {\n className,\n presentation = 'fixed',\n // removed legacy props\n // new API\n defaultOpen,\n open,\n onOpenChange,\n expandedSize = 200,\n minSize = 100,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));\n\n // Throttled/debounced emitter for onSizeChange\n const onSizeChange = (props as any).onSizeChange;\n const sizeUpdate = (props as any).sizeUpdate;\n const sizeUpdateMs = (props as any).sizeUpdateMs;\n const emitSizeChange = React.useMemo(() => {\n const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);\n const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';\n const ms = sizeUpdateMs ?? 50;\n if (!cb) return () => {};\n if (strategy === 'debounce') {\n let t: any = null;\n return (s: number, meta: BottomSizeChangeMeta) => {\n if (t) clearTimeout(t);\n t = setTimeout(() => {\n cb(s, meta);\n }, ms);\n };\n }\n if (strategy === 'throttle') {\n let last = 0;\n return (s: number, meta: BottomSizeChangeMeta) => {\n const now = Date.now();\n if (now - last >= ms) {\n last = now;\n cb(s, meta);\n }\n };\n }\n return (s: number, meta: BottomSizeChangeMeta) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n const didInitRef = React.useRef(false);\n const didInitFromDefaultOpenRef = React.useRef(false);\n const resolvedDefaultOpen = useResponsiveValue(defaultOpen as any);\n React.useEffect(() => {\n if (didInitRef.current) return;\n if (!shell.currentBreakpointReady) return;\n didInitRef.current = true;\n if (typeof open === 'undefined' && typeof defaultOpen !== 'undefined') {\n const initial = Boolean(resolvedDefaultOpen);\n shell.setBottomMode(initial ? 'expanded' : 'collapsed');\n didInitFromDefaultOpenRef.current = true;\n }\n }, [shell, open, defaultOpen, resolvedDefaultOpen]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `open` and `defaultOpen`. Choose one.');\n }\n if (typeof (props as any).size !== 'undefined' && typeof (props as any).defaultSize !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `size` and `defaultSize`. Choose one.');\n }\n }\n\n React.useEffect(() => {\n const isControlled = typeof open !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [open]);\n\n // Controlled sync (responsive handled below)\n React.useEffect(() => {\n if (typeof open === 'undefined') return;\n shell.setBottomMode(open ? 'expanded' : 'collapsed');\n }, [shell, open]);\n\n const responsiveNotifiedRef = React.useRef(false);\n\n // Controlled responsive open\n const resolvedOpen = useResponsiveValue(open);\n React.useEffect(() => {\n if (typeof resolvedOpen === 'undefined') return;\n const shouldExpand = Boolean(resolvedOpen);\n shell.setBottomMode(shouldExpand ? 'expanded' : 'collapsed');\n }, [shell, resolvedOpen]);\n\n const initNotifiedRef = React.useRef(false);\n const lastBottomModeRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.bottomMode === 'expanded') {\n onOpenChange?.(true, { reason: 'init' });\n initNotifiedRef.current = true;\n }\n if (typeof open === 'undefined') {\n if (lastBottomModeRef.current !== null && lastBottomModeRef.current !== shell.bottomMode) {\n if (!responsiveNotifiedRef.current) {\n onOpenChange?.(shell.bottomMode === 'expanded', { reason: 'toggle' });\n }\n responsiveNotifiedRef.current = false;\n }\n lastBottomModeRef.current = shell.bottomMode;\n }\n }, [shell.bottomMode, open, defaultOpen, onOpenChange]);\n\n React.useEffect(() => {\n if (shell.bottomMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.bottomMode, onExpand, onCollapse]);\n\n const isExpanded = shell.bottomMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:bottom:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n window.localStorage.setItem(key, String(size));\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n (async () => {\n if (!resizable || !persistenceAdapter?.load || isOverlay) return;\n const loaded = await persistenceAdapter.load();\n if (mounted && typeof loaded === 'number' && localRef.current) {\n localRef.current.style.setProperty('--bottom-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--bottom-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'horizontal',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const delta = client - startClient;\n return startSize - delta;\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n emitSizeChange(size, { reason: 'resize' });\n persistenceAdapter?.save?.(size);\n },\n target: 'bottom',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setBottomMode('collapsed'),\n requestToggle: () => shell.togglePane('bottom'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)\n const {\n defaultOpen: _bottomDefaultOpenIgnored,\n open: _bottomOpenIgnored,\n onOpenChange: _bottomOnOpenChangeIgnored,\n size: _bottomSizeIgnored,\n defaultSize: _bottomDefaultSizeIgnored,\n onSizeChange: _bottomOnSizeChangeIgnored,\n sizeUpdate: _szu,\n sizeUpdateMs: _szums,\n ...bottomDomProps\n } = props as any;\n\n // Normalize CSS lengths to px (moved above overlay return to keep hook order consistent)\n const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {\n if (value == null) return undefined;\n if (typeof value === 'number' && Number.isFinite(value)) return value;\n const str = String(value).trim();\n if (!str) return undefined;\n if (str.endsWith('px')) return Number.parseFloat(str);\n if (str.endsWith('rem')) {\n const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;\n return Number.parseFloat(str) * rem;\n }\n if (str.endsWith('%')) {\n const pct = Number.parseFloat(str);\n const base = document.documentElement.clientHeight || window.innerHeight || 0;\n return (pct / 100) * base;\n }\n const n = Number.parseFloat(str);\n return Number.isFinite(n) ? n : undefined;\n }, []);\n\n // Apply defaultSize on mount when uncontrolled (moved above overlay return)\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof (props as any).size === 'undefined' && typeof (props as any).defaultSize !== 'undefined') {\n const px = normalizeToPx((props as any).defaultSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'init' });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled size sync (moved above overlay return)\n const controlledSize = (props as any).size;\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof controlledSize === 'undefined') return;\n const px = normalizeToPx(controlledSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.bottomMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"bottom\" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Bottom panel</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...bottomDomProps}\n ref={setRef}\n className={classNames('rt-ShellBottom', className)}\n data-mode={shell.bottomMode}\n data-peek={shell.peekTarget === 'bottom' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--bottom-size' as any]: `${expandedSize}px`,\n ['--bottom-min-size' as any]: `${minSize}px`,\n ['--bottom-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellBottomContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n },\n) as BottomComponent;\nBottom.displayName = 'Shell.Bottom';\nBottom.Handle = BottomHandle;\n"],
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,YAAAE,IAAA,eAAAC,GAAAH,IAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAuB,0BACvBC,
|
|
6
|
-
"names": ["shell_bottom_exports", "__export", "Bottom", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { BottomHandle, PaneHandle } from './shell-handles.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';\nimport { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';\n\ntype BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };\ntype BottomUncontrolledProps = { defaultOpen?: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };\ntype BottomSizeControlledProps = { size: number | string; defaultSize?: never };\ntype BottomSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype BottomSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };\ntype BottomPublicProps = PaneBaseProps &\n (BottomControlledProps | BottomUncontrolledProps) &\n (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {\n onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n };\n\ntype BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };\n\nconst BOTTOM_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'defaultOpen',\n 'open',\n 'onOpenChange',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n] as const satisfies readonly (keyof BottomPublicProps)[];\n\nexport const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = 'fixed',\n defaultOpen,\n open,\n onOpenChange,\n expandedSize = 200,\n minSize = 100,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n size,\n defaultSize,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n } = initialProps;\n const bottomDomProps = extractPaneDomProps(initialProps, BOTTOM_DOM_PROP_KEYS);\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));\n\n // Throttled/debounced emitter for onSizeChange\n const normalizedControlledOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(open), [open]);\n const normalizedDefaultOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(defaultOpen), [defaultOpen]);\n const openIsResponsive = typeof open === 'object' && open !== null;\n useResponsiveInitialState<PaneMode>({\n controlledValue: normalizedControlledOpen,\n defaultValue: normalizedDefaultOpen,\n currentValue: shell.bottomMode,\n setValue: shell.setBottomMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: openIsResponsive,\n onResponsiveChange: (next) => onOpenChange?.(next === 'expanded', { reason: 'responsive' }),\n onInit: (initial) => {\n if (typeof open === 'undefined') {\n onOpenChange?.(initial === 'expanded', { reason: 'init' });\n }\n },\n });\n\n const emitSizeChange = React.useMemo(() => {\n const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);\n const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';\n const ms = sizeUpdateMs ?? 50;\n if (!cb) return () => {};\n if (strategy === 'debounce') {\n let t: any = null;\n return (s: number, meta: BottomSizeChangeMeta) => {\n if (t) clearTimeout(t);\n t = setTimeout(() => {\n cb(s, meta);\n }, ms);\n };\n }\n if (strategy === 'throttle') {\n let last = 0;\n return (s: number, meta: BottomSizeChangeMeta) => {\n const now = Date.now();\n if (now - last >= ms) {\n last = now;\n cb(s, meta);\n }\n };\n }\n return (s: number, meta: BottomSizeChangeMeta) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `open` and `defaultOpen`. Choose one.');\n }\n if (typeof size !== 'undefined' && typeof defaultSize !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `size` and `defaultSize`. Choose one.');\n }\n }\n\n React.useEffect(() => {\n const isControlled = typeof open !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [open]);\n\n const initNotifiedRef = React.useRef(false);\n const lastBottomModeRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.bottomMode === 'expanded') {\n onOpenChange?.(true, { reason: 'init' });\n initNotifiedRef.current = true;\n }\n if (typeof open === 'undefined') {\n if (lastBottomModeRef.current !== null && lastBottomModeRef.current !== shell.bottomMode) {\n onOpenChange?.(shell.bottomMode === 'expanded', { reason: 'toggle' });\n }\n lastBottomModeRef.current = shell.bottomMode;\n }\n }, [shell.bottomMode, open, defaultOpen, onOpenChange]);\n\n React.useEffect(() => {\n if (shell.bottomMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.bottomMode, onExpand, onCollapse]);\n\n const isExpanded = shell.bottomMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:bottom:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n try {\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to load persisted size', err);\n }\n return undefined;\n }\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n try {\n window.localStorage.setItem(key, String(size));\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to save persisted size', err);\n }\n }\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n if (!resizable || !persistenceAdapter?.load || isOverlay) return undefined;\n const loaded = persistenceAdapter.load();\n const applyLoaded = (value?: number) => {\n if (!mounted || typeof value !== 'number' || !localRef.current) return;\n localRef.current.style.setProperty('--bottom-size', `${value}px`);\n onResize?.(value);\n };\n if (loaded instanceof Promise) {\n loaded.then(applyLoaded).catch((err) => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to load persisted size', err);\n }\n });\n } else {\n applyLoaded(loaded);\n }\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--bottom-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'horizontal',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const delta = client - startClient;\n return startSize - delta;\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n emitSizeChange(size, { reason: 'resize' });\n persistenceAdapter?.save?.(size);\n },\n target: 'bottom',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setBottomMode('collapsed'),\n requestToggle: () => shell.togglePane('bottom'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)\n // Normalize CSS lengths to px (moved above overlay return to keep hook order consistent)\n const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {\n if (value == null) return undefined;\n if (typeof value === 'number' && Number.isFinite(value)) return value;\n const str = String(value).trim();\n if (!str) return undefined;\n if (str.endsWith('px')) return Number.parseFloat(str);\n if (str.endsWith('rem')) {\n const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;\n return Number.parseFloat(str) * rem;\n }\n if (str.endsWith('%')) {\n const pct = Number.parseFloat(str);\n const base = document.documentElement.clientHeight || window.innerHeight || 0;\n return (pct / 100) * base;\n }\n const n = Number.parseFloat(str);\n return Number.isFinite(n) ? n : undefined;\n }, []);\n\n // Apply defaultSize on mount when uncontrolled (moved above overlay return)\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {\n const px = normalizeToPx(defaultSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'init' });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled size sync (moved above overlay return)\n const controlledSize = size;\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof controlledSize === 'undefined') return;\n const px = normalizeToPx(controlledSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.bottomMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"bottom\" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Bottom panel</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...bottomDomProps}\n ref={setRef}\n className={classNames('rt-ShellBottom', className)}\n data-mode={shell.bottomMode}\n data-peek={shell.peekTarget === 'bottom' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--bottom-size' as any]: `${expandedSize}px`,\n ['--bottom-min-size' as any]: `${minSize}px`,\n ['--bottom-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellBottomContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as BottomComponent;\nBottom.displayName = 'Shell.Bottom';\nBottom.Handle = BottomHandle;\n"],
|
|
5
|
+
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,YAAAE,IAAA,eAAAC,GAAAH,IAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAuB,0BACvBC,EAA+B,iCAC/BC,GAAyB,+BACzBC,EAAqE,6BACrEC,GAAkC,6BAClCC,EAAyC,8BACzCC,GAA6B,6BAE7BC,EAAoE,mCAkBpE,MAAMC,GAAuB,CAC3B,YACA,WACA,cACA,OACA,eACA,OACA,cACA,eACA,aACA,eACA,OACF,EAEaZ,EAASE,EAAM,WAA8C,CAACW,EAAcC,IAAQ,CAC/F,KAAM,CACJ,UAAAC,EACA,aAAAC,EAAe,QACf,YAAAC,EACA,KAAAC,EACA,aAAAC,EACA,aAAAC,EAAe,IACf,QAAAC,EAAU,IACV,QAAAC,EAAU,IACV,UAAAC,EAAY,GACZ,YAAAC,GAAc,GACd,SAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,GACA,YAAAC,GACA,WAAAC,GACA,cAAAC,GACA,kBAAAC,GACA,OAAAC,EACA,YAAAC,EACA,SAAAC,GACA,MAAAC,GACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EAAe,EACjB,EAAI5B,EACE6B,MAAiB,uBAAoB7B,EAAcD,EAAoB,EACvE+B,KAAQ,aAAS,EACjBC,KAAuB,6BAA0B5B,CAAY,EAC7D6B,EAAYD,IAAyB,UACrCE,GAAYF,IAAyB,UACrCG,EAAW7C,EAAM,OAA8B,IAAI,EACnD8C,GAAS9C,EAAM,YAClB+C,GAAgC,CAC/BF,EAAS,QAAUE,EACf,OAAOnC,GAAQ,WAAYA,EAAImC,CAAI,EAC9BnC,IAAMA,EAAsD,QAAUmC,EACjF,EACA,CAACnC,CAAG,CACN,EACMoC,EAAahD,EAAM,SAAS,QAAQiC,EAAQ,EAC5CgB,EAAiBD,EAAW,OAAQE,GAA2BlD,EAAM,eAAekD,CAAE,GAAKA,EAAG,OAAS,cAAY,EACnHC,EAAkBH,EAAW,OAAQE,GAA2B,EAAElD,EAAM,eAAekD,CAAE,GAAKA,EAAG,OAAS,eAAa,EAGvHE,GAA2BpD,EAAM,QAAQ,OAAM,kCAA+BgB,CAAI,EAAG,CAACA,CAAI,CAAC,EAC3FqC,GAAwBrD,EAAM,QAAQ,OAAM,kCAA+Be,CAAW,EAAG,CAACA,CAAW,CAAC,EACtGuC,GAAmB,OAAOtC,GAAS,UAAYA,IAAS,QAC9D,6BAAoC,CAClC,gBAAiBoC,GACjB,aAAcC,GACd,aAAcZ,EAAM,WACpB,SAAUA,EAAM,cAChB,gBAAiBA,EAAM,uBACvB,uBAAwBa,GACxB,mBAAqBC,GAAStC,IAAesC,IAAS,WAAY,CAAE,OAAQ,YAAa,CAAC,EAC1F,OAASC,GAAY,CACf,OAAOxC,EAAS,KAClBC,IAAeuC,IAAY,WAAY,CAAE,OAAQ,MAAO,CAAC,CAE7D,CACF,CAAC,EAED,MAAMC,EAAiBzD,EAAM,QAAQ,IAAM,CACzC,MAAM0D,EAAKrB,EACLsB,EAAWrB,EACXsB,EAAKrB,GAAgB,GAC3B,GAAI,CAACmB,EAAI,MAAO,IAAM,CAAC,EACvB,GAAIC,IAAa,WAAY,CAC3B,IAAIE,EAAS,KACb,MAAO,CAACC,EAAWC,IAA+B,CAC5CF,GAAG,aAAaA,CAAC,EACrBA,EAAI,WAAW,IAAM,CACnBH,EAAGI,EAAGC,CAAI,CACZ,EAAGH,CAAE,CACP,CACF,CACA,GAAID,IAAa,WAAY,CAC3B,IAAIK,EAAO,EACX,MAAO,CAACF,EAAWC,IAA+B,CAChD,MAAME,EAAM,KAAK,IAAI,EACjBA,EAAMD,GAAQJ,IAChBI,EAAOC,EACPP,EAAGI,EAAGC,CAAI,EAEd,CACF,CACA,MAAO,CAACD,EAAWC,IAA+BL,EAAGI,EAAGC,CAAI,CAC9D,EAAG,CAAC1B,EAAcC,EAAYC,CAAY,CAAC,EAGrC2B,EAAmBlE,EAAM,OAAuB,IAAI,EAU1DA,EAAM,UAAU,IAAM,CACpB,MAAMmE,EAAe,OAAOnD,EAAS,IACrC,GAAIkD,EAAiB,UAAY,KAAM,CACrCA,EAAiB,QAAUC,EAC3B,MACF,CACID,EAAiB,UAAYC,IAC/B,QAAQ,KAAK,sFAAsF,EACnGD,EAAiB,QAAUC,EAE/B,EAAG,CAACnD,CAAI,CAAC,EAET,MAAMoD,EAAkBpE,EAAM,OAAO,EAAK,EACpCqE,EAAoBrE,EAAM,OAAwB,IAAI,EAC5DA,EAAM,UAAU,IAAM,CAChB,CAACoE,EAAgB,SAAW,OAAOpD,EAAS,KAAeD,GAAe0B,EAAM,aAAe,aACjGxB,IAAe,GAAM,CAAE,OAAQ,MAAO,CAAC,EACvCmD,EAAgB,QAAU,IAExB,OAAOpD,EAAS,MACdqD,EAAkB,UAAY,MAAQA,EAAkB,UAAY5B,EAAM,YAC5ExB,IAAewB,EAAM,aAAe,WAAY,CAAE,OAAQ,QAAS,CAAC,EAEtE4B,EAAkB,QAAU5B,EAAM,WAEtC,EAAG,CAACA,EAAM,WAAYzB,EAAMD,EAAaE,CAAY,CAAC,EAEtDjB,EAAM,UAAU,IAAM,CAChByC,EAAM,aAAe,WACvBlB,IAAW,EAEXC,IAAa,CAEjB,EAAG,CAACiB,EAAM,WAAYlB,EAAUC,CAAU,CAAC,EAE3C,MAAM8C,EAAa7B,EAAM,aAAe,WAElC8B,EAAqBvE,EAAM,QAAQ,IAAM,CAC7C,GAAI,CAAC+B,GAAUC,EAAa,OAAOA,EACnC,MAAMwC,EAAM,0BAA0BzC,CAAM,GAyB5C,MAxBqC,CACnC,KAAM,IAAM,CACV,GAAI,SAAO,OAAW,KACtB,GAAI,CACF,MAAM0C,EAAI,OAAO,aAAa,QAAQD,CAAG,EACzC,OAAOC,EAAI,OAAOA,CAAC,EAAI,MACzB,MAAc,CAIZ,MACF,CACF,EACA,KAAOtC,GAAiB,CACtB,GAAI,SAAO,OAAW,KACtB,GAAI,CACF,OAAO,aAAa,QAAQqC,EAAK,OAAOrC,CAAI,CAAC,CAC/C,MAAc,CAId,CACF,CACF,CAEF,EAAG,CAACJ,EAAQC,CAAW,CAAC,EAExBhC,EAAM,UAAU,IAAM,CACpB,IAAI0E,EAAU,GACd,GAAI,CAACrD,GAAa,CAACkD,GAAoB,MAAQ5B,EAAW,OAC1D,MAAMgC,EAASJ,EAAmB,KAAK,EACjCK,EAAeC,GAAmB,CAClC,CAACH,GAAW,OAAOG,GAAU,UAAY,CAAChC,EAAS,UACvDA,EAAS,QAAQ,MAAM,YAAY,gBAAiB,GAAGgC,CAAK,IAAI,EAChEpD,IAAWoD,CAAK,EAClB,EACA,OAAIF,aAAkB,QACpBA,EAAO,KAAKC,CAAW,EAAE,MAAOE,GAAQ,CAIxC,CAAC,EAEDF,EAAYD,CAAM,EAEb,IAAM,CACXD,EAAU,EACZ,CACF,EAAG,CAACrD,EAAWkD,EAAoB9C,EAAUkB,CAAS,CAAC,EAEvD,MAAMoC,GACJ1D,GAAa,CAACsB,GAAa2B,EACzBtE,EAAA,cAAC,qBAAkB,SAAlB,CACC,MAAO,CACL,aAAc6C,EACd,WAAY,gBACZ,QAAA1B,EACA,QAAAC,EACA,YAAaF,EACb,YAAa,aACb,KAAM,QACN,YAAa,CAAC8D,EAAQC,EAAaC,IAAc,CAC/C,MAAMC,EAAQH,EAASC,EACvB,OAAOC,EAAYC,CACrB,EACA,SAAA1D,EACA,cAAAC,GACA,YAAcS,GAAS,CACrBR,KAAcQ,CAAI,EAClBsB,EAAetB,EAAM,CAAE,OAAQ,QAAS,CAAC,EACzCoC,GAAoB,OAAOpC,CAAI,CACjC,EACA,OAAQ,SACR,YAAAb,GACA,WAAAM,GACA,cAAeC,IAAiB,EAChC,kBAAAC,GACA,gBAAiB,IAAMW,EAAM,cAAc,WAAW,EACtD,cAAe,IAAMA,EAAM,WAAW,QAAQ,CAChD,GAECQ,EAAe,OAAS,EAAIA,EAAe,IAAI,CAACC,EAAIkC,IAAMpF,EAAM,aAAakD,EAAI,CAAE,IAAKA,EAAG,KAAOkC,CAAE,CAAC,CAAC,EAAIpF,EAAA,cAAC,iBAAW,CACzH,EACE,KAIAqF,EAAgBrF,EAAM,YAAa6E,GAA2D,CAClG,GAAIA,GAAS,KAAM,OACnB,GAAI,OAAOA,GAAU,UAAY,OAAO,SAASA,CAAK,EAAG,OAAOA,EAChE,MAAMS,EAAM,OAAOT,CAAK,EAAE,KAAK,EAC/B,GAAI,CAACS,EAAK,OACV,GAAIA,EAAI,SAAS,IAAI,EAAG,OAAO,OAAO,WAAWA,CAAG,EACpD,GAAIA,EAAI,SAAS,KAAK,EAAG,CACvB,MAAMC,EAAM,OAAO,WAAW,iBAAiB,SAAS,eAAe,EAAE,UAAY,IAAI,GAAK,GAC9F,OAAO,OAAO,WAAWD,CAAG,EAAIC,CAClC,CACA,GAAID,EAAI,SAAS,GAAG,EAAG,CACrB,MAAME,EAAM,OAAO,WAAWF,CAAG,EAC3BG,EAAO,SAAS,gBAAgB,cAAgB,OAAO,aAAe,EAC5E,OAAQD,EAAM,IAAOC,CACvB,CACA,MAAMC,EAAI,OAAO,WAAWJ,CAAG,EAC/B,OAAO,OAAO,SAASI,CAAC,EAAIA,EAAI,MAClC,EAAG,CAAC,CAAC,EAGL1F,EAAM,UAAU,IAAM,CACpB,GAAK6C,EAAS,SACV,OAAOV,EAAS,KAAe,OAAOC,EAAgB,IAAa,CACrE,MAAMuD,EAAKN,EAAcjD,CAAW,EACpC,GAAI,OAAOuD,GAAO,UAAY,OAAO,SAASA,CAAE,EAAG,CAGjD,MAAMC,EAAU,KAAK,KADP,OAAOxE,GAAY,SAAWA,EAAU,SACpBuE,EAAI,KAAK,KAF7B,OAAOxE,GAAY,SAAWA,EAAU,SAEEwE,EAAIA,CAAE,CAAC,EAC/D9C,EAAS,QAAQ,MAAM,YAAY,gBAAiB,GAAG+C,CAAO,IAAI,EAClEnC,EAAemC,EAAS,CAAE,OAAQ,MAAO,CAAC,CAC5C,CACF,CAEF,EAAG,CAAC,CAAC,EAGL,MAAMC,EAAiB1D,EAcvB,GAbAnC,EAAM,UAAU,IAAM,CAEpB,GADI,CAAC6C,EAAS,SACV,OAAOgD,EAAmB,IAAa,OAC3C,MAAMF,EAAKN,EAAcQ,CAAc,EACvC,GAAI,OAAOF,GAAO,UAAY,OAAO,SAASA,CAAE,EAAG,CAGjD,MAAMC,EAAU,KAAK,KADP,OAAOxE,GAAY,SAAWA,EAAU,SACpBuE,EAAI,KAAK,KAF7B,OAAOxE,GAAY,SAAWA,EAAU,SAEEwE,EAAIA,CAAE,CAAC,EAC/D9C,EAAS,QAAQ,MAAM,YAAY,gBAAiB,GAAG+C,CAAO,IAAI,EAClEnC,EAAemC,EAAS,CAAE,OAAQ,YAAa,CAAC,CAClD,CACF,EAAG,CAACC,EAAgB1E,EAASC,EAASiE,EAAe5B,CAAc,CAAC,EAEhEd,EAAW,CACb,MAAM3B,EAAOyB,EAAM,aAAe,WAClC,OACEzC,EAAA,cAACE,EAAM,KAAN,CAAW,KAAMc,EAAM,aAAe8E,GAAMrD,EAAM,cAAcqD,EAAI,WAAa,WAAW,GAC3F9F,EAAA,cAACE,EAAM,QAAN,CAAc,KAAK,SAAS,MAAO,CAAE,QAAS,CAAE,EAAG,OAAQ,CAAE,QAAS,GAAGgB,CAAY,IAAK,GACzFlB,EAAA,cAAC,sBACCA,EAAA,cAACE,EAAM,MAAN,KAAY,cAAY,CAC3B,EACCiD,CACH,CACF,CAEJ,CAEA,OACEnD,EAAA,cAAC,OACE,GAAGwC,GACJ,IAAKM,GACL,aAAW,EAAAiD,SAAW,iBAAkBlF,CAAS,EACjD,YAAW4B,EAAM,WACjB,YAAWA,EAAM,aAAe,UAAY,OAC5C,oBAAmBA,EAAM,uBAAyBC,EAAuB,OACzE,YAAYD,EAAM,wBAA0BG,IAAa0B,GAAe,OACxE,MAAO,CACL,GAAGpC,GACF,gBAAyB,GAAGhB,CAAY,KACxC,oBAA6B,GAAGC,CAAO,KACvC,oBAA6B,GAAGC,CAAO,IAC1C,GAEApB,EAAA,cAAC,OAAI,UAAU,wBAAwB,eAAcsE,GAAc,QAChEnB,CACH,EACC4B,EACH,CAEJ,CAAC,EACDjF,EAAO,YAAc,eACrBA,EAAO,OAAS",
|
|
6
|
+
"names": ["shell_bottom_exports", "__export", "Bottom", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "import_shell_prop_helpers", "BOTTOM_DOM_PROP_KEYS", "initialProps", "ref", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "size", "defaultSize", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "bottomDomProps", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "normalizedControlledOpen", "normalizedDefaultOpen", "openIsResponsive", "next", "initial", "emitSizeChange", "cb", "strategy", "ms", "t", "s", "meta", "last", "now", "wasControlledRef", "isControlled", "initNotifiedRef", "lastBottomModeRef", "isExpanded", "persistenceAdapter", "key", "v", "mounted", "loaded", "applyLoaded", "value", "err", "handleEl", "client", "startClient", "startSize", "delta", "i", "normalizeToPx", "str", "rem", "pct", "base", "n", "px", "clamped", "controlledSize", "o", "classNames"]
|
|
7
7
|
}
|
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { InspectorHandle } from './shell-handles.js';
|
|
3
|
-
import type { Breakpoint,
|
|
4
|
-
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
-
presentation?: ResponsivePresentation;
|
|
6
|
-
expandedSize?: number;
|
|
7
|
-
minSize?: number;
|
|
8
|
-
maxSize?: number;
|
|
9
|
-
resizable?: boolean;
|
|
10
|
-
collapsible?: boolean;
|
|
11
|
-
onExpand?: () => void;
|
|
12
|
-
onCollapse?: () => void;
|
|
13
|
-
onResize?: (size: number) => void;
|
|
14
|
-
resizer?: React.ReactNode;
|
|
15
|
-
onResizeStart?: (size: number) => void;
|
|
16
|
-
onResizeEnd?: (size: number) => void;
|
|
17
|
-
snapPoints?: number[];
|
|
18
|
-
snapTolerance?: number;
|
|
19
|
-
collapseThreshold?: number;
|
|
20
|
-
paneId?: string;
|
|
21
|
-
persistence?: PaneSizePersistence;
|
|
22
|
-
}
|
|
3
|
+
import type { Breakpoint, PaneBaseProps } from '../shell.types.js';
|
|
23
4
|
type InspectorOpenChangeMeta = {
|
|
24
5
|
reason: 'init' | 'toggle' | 'responsive';
|
|
25
6
|
};
|
|
@@ -36,7 +17,15 @@ type InspectorUncontrolledProps = {
|
|
|
36
17
|
type InspectorSizeChangeMeta = {
|
|
37
18
|
reason: 'init' | 'resize' | 'controlled';
|
|
38
19
|
};
|
|
39
|
-
type
|
|
20
|
+
type InspectorSizeControlledProps = {
|
|
21
|
+
size: number | string;
|
|
22
|
+
defaultSize?: never;
|
|
23
|
+
};
|
|
24
|
+
type InspectorSizeUncontrolledProps = {
|
|
25
|
+
defaultSize?: number | string;
|
|
26
|
+
size?: never;
|
|
27
|
+
};
|
|
28
|
+
type InspectorPublicProps = PaneBaseProps & (InspectorControlledProps | InspectorUncontrolledProps) & (InspectorSizeControlledProps | InspectorSizeUncontrolledProps) & {
|
|
40
29
|
onSizeChange?: (size: number, meta: InspectorSizeChangeMeta) => void;
|
|
41
30
|
sizeUpdate?: 'throttle' | 'debounce';
|
|
42
31
|
sizeUpdateMs?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell-inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"shell-inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG1H,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC5E,KAAK,wBAAwB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrL,KAAK,0BAA0B,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACxL,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC5E,KAAK,4BAA4B,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,8BAA8B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACtF,KAAK,oBAAoB,GAAG,aAAa,GACvC,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,GACvD,CAAC,4BAA4B,GAAG,8BAA8B,CAAC,GAAG;IAChE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,KAAK,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,eAAe,CAAA;CAAE,CAAC;AAgB3J,eAAO,MAAM,SAAS,EAgUhB,kBAAkB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Pe=Object.create;var g=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var ze=Object.getOwnPropertyNames;var Se=Object.getPrototypeOf,Ie=Object.prototype.hasOwnProperty;var Me=(i,a)=>{for(var l in a)g(i,l,{get:a[l],enumerable:!0})},Q=(i,a,l,b)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of ze(a))!Ie.call(i,p)&&p!==l&&g(i,p,{get:()=>a[p],enumerable:!(b=be(a,p))||b.enumerable});return i};var H=(i,a,l)=>(l=i!=null?Pe(Se(i)):{},Q(a||!i||!i.__esModule?g(l,"default",{value:i,enumerable:!0}):l,i)),ge=i=>Q(g({},"__esModule",{value:!0}),i);var Ce={};Me(Ce,{Inspector:()=>F});module.exports=ge(Ce);var n=H(require("react")),X=H(require("classnames")),B=H(require("../sheet.js")),Z=require("../visually-hidden.js"),ee=require("../shell.context.js"),x=require("../shell.hooks.js"),ne=require("./shell-resize.js"),y=require("./shell-handles.js"),ve=require("../shell.types.js"),P=require("./shell-prop-helpers.js");const xe=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style"],F=n.forwardRef((i,a)=>{const{className:l,presentation:b={initial:"overlay",lg:"fixed"},defaultOpen:p,open:d,onOpenChange:h,expandedSize:C=320,minSize:f=200,maxSize:m=500,resizable:R=!1,collapsible:te=!0,onExpand:U,onCollapse:_,onResize:v,onResizeStart:oe,onResizeEnd:re,snapPoints:se,snapTolerance:ie,collapseThreshold:ae,paneId:E,persistence:N,children:le,style:pe,onSizeChange:$,sizeUpdate:L,sizeUpdateMs:A=50,size:W,defaultSize:j}=i,de=(0,P.extractPaneDomProps)(i,xe),r=(0,ee.useShell)(),O=(0,x.useResponsivePresentation)(b),z=O==="overlay",ce=O==="stacked",u=n.useRef(null),ue=n.useCallback(e=>{u.current=e,typeof a=="function"?a(e):a&&(a.current=e)},[a]),q=n.Children.toArray(le),K=q.filter(e=>n.isValidElement(e)&&e.type===y.InspectorHandle),Y=q.filter(e=>!(n.isValidElement(e)&&e.type===y.InspectorHandle)),fe=n.useMemo(()=>(0,P.mapResponsiveBooleanToPaneMode)(d),[d]),me=n.useMemo(()=>(0,P.mapResponsiveBooleanToPaneMode)(p),[p]),ye=typeof d=="object"&&d!==null;(0,x.useResponsiveInitialState)({controlledValue:fe,defaultValue:me,currentValue:r.inspectorMode,setValue:r.setInspectorMode,breakpointReady:r.currentBreakpointReady,controlledIsResponsive:ye,onResponsiveChange:e=>h?.(e==="expanded",{reason:"responsive"}),onInit:e=>{typeof d>"u"&&h?.(e==="expanded",{reason:"init"})}});const S=n.useMemo(()=>{const e=$,o=L,s=A??50;if(!e)return()=>{};if(o==="debounce"){let t=null;return(c,V)=>{t&&clearTimeout(t),t=setTimeout(()=>{e(c,V)},s)}}if(o==="throttle"){let t=0;return(c,V)=>{const J=Date.now();J-t>=s&&(t=J,e(c,V))}}return(t,c)=>e(t,c)},[$,L,A]),I=n.useRef(null);n.useEffect(()=>{const e=typeof d<"u";if(I.current===null){I.current=e;return}I.current!==e&&(console.warn("Shell.Inspector: Switching between controlled and uncontrolled `open` is not supported."),I.current=e)},[d]);const G=n.useRef(!1),w=n.useRef(null);n.useEffect(()=>{!G.current&&typeof d>"u"&&p&&r.inspectorMode==="expanded"&&(h?.(!0,{reason:"init"}),G.current=!0),typeof d>"u"&&(w.current!==null&&w.current!==r.inspectorMode&&h?.(r.inspectorMode==="expanded",{reason:"toggle"}),w.current=r.inspectorMode)},[r.inspectorMode,d,p,h]),n.useEffect(()=>{r.inspectorMode==="expanded"?U?.():_?.()},[r.inspectorMode,U,_]);const k=r.inspectorMode==="expanded",M=n.useMemo(()=>{if(!E||N)return N;const e=`kookie-ui:shell:inspector:${E}`;return{load:()=>{if(!(typeof window>"u"))try{const s=window.localStorage.getItem(e);return s?Number(s):void 0}catch{return}},save:s=>{if(!(typeof window>"u"))try{window.localStorage.setItem(e,String(s))}catch{}}}},[E,N]);n.useEffect(()=>{let e=!0;if(!R||!M?.load||z)return;const o=M.load(),s=t=>{!e||typeof t!="number"||!u.current||(u.current.style.setProperty("--inspector-size",`${t}px`),v?.(t))};return o instanceof Promise?o.then(s).catch(t=>{}):s(o),()=>{e=!1}},[R,M,v,z]);const he=R&&!z&&k?n.createElement(ne.PaneResizeContext.Provider,{value:{containerRef:u,cssVarName:"--inspector-size",minSize:f,maxSize:m,defaultSize:C,orientation:"vertical",edge:"start",computeNext:(e,o,s)=>{const t=getComputedStyle(u.current).direction==="rtl",c=e-o;return s+(t?c:-c)},onResize:v,onResizeStart:oe,onResizeEnd:e=>{re?.(e),S(e,{reason:"resize"}),M?.save?.(e)},target:"inspector",collapsible:te,snapPoints:se,snapTolerance:ie??8,collapseThreshold:ae,requestCollapse:()=>r.setInspectorMode("collapsed"),requestToggle:()=>r.togglePane("inspector")}},K.length>0?K.map((e,o)=>n.cloneElement(e,{key:e.key??o})):n.createElement(y.PaneHandle,null)):null,T=n.useCallback(e=>{if(e==null)return;if(typeof e=="number"&&Number.isFinite(e))return e;const o=String(e).trim();if(!o)return;if(o.endsWith("px"))return Number.parseFloat(o);if(o.endsWith("rem")){const t=Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16")||16;return Number.parseFloat(o)*t}if(o.endsWith("%")){const t=Number.parseFloat(o),c=document.documentElement.clientWidth||window.innerWidth||0;return t/100*c}const s=Number.parseFloat(o);return Number.isFinite(s)?s:void 0},[]);n.useEffect(()=>{if(u.current&&typeof W>"u"&&typeof j<"u"){const e=T(j);if(typeof e=="number"&&Number.isFinite(e)){const t=Math.min((typeof m=="number"?m:void 0)??e,Math.max((typeof f=="number"?f:void 0)??e,e));u.current.style.setProperty("--inspector-size",`${t}px`),S(t,{reason:"init"})}}},[]);const D=W;if(n.useEffect(()=>{if(!u.current||typeof D>"u")return;const e=T(D);if(typeof e=="number"&&Number.isFinite(e)){const t=Math.min((typeof m=="number"?m:void 0)??e,Math.max((typeof f=="number"?f:void 0)??e,e));u.current.style.setProperty("--inspector-size",`${t}px`),S(t,{reason:"controlled"})}},[D,f,m,T,S]),z){const e=r.inspectorMode==="expanded";return n.createElement(B.Root,{open:e,onOpenChange:o=>r.setInspectorMode(o?"expanded":"collapsed")},n.createElement(B.Content,{side:"end",style:{padding:0},width:{initial:`${C}px`}},n.createElement(Z.VisuallyHidden,null,n.createElement(B.Title,null,"Inspector")),Y))}return n.createElement("div",{...de,ref:ue,className:(0,X.default)("rt-ShellInspector",l),"data-mode":r.inspectorMode,"data-peek":r.peekTarget==="inspector"||void 0,"data-presentation":r.currentBreakpointReady?O:void 0,"data-open":r.currentBreakpointReady&&ce&&k||void 0,style:{...pe,"--inspector-size":`${C}px`,"--inspector-min-size":`${f}px`,"--inspector-max-size":`${m}px`}},n.createElement("div",{className:"rt-ShellInspectorContent","data-visible":k||void 0},Y),he)});F.displayName="Shell.Inspector",F.Handle=y.InspectorHandle;
|
|
2
2
|
//# sourceMappingURL=shell-inspector.js.map
|