@viasat/beam-react 2.2.1 → 2.8.0
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/assets/ActionList.css +1 -1
- package/assets/Checkbox.css +1 -1
- package/assets/RadioButton.css +1 -1
- package/assets/Search.Results.css +1 -0
- package/assets/card.css +1 -1
- package/assets/panel.css +1 -0
- package/chunks/ActionList.Group.B4PX5SKS.js +111 -0
- package/chunks/ActionList.Group.C2R56u2A.js +1 -0
- package/chunks/ActionList.Item.5Y-SwzjK.js +1 -0
- package/chunks/{ActionList.Item.Dg_KHGsm.js → ActionList.Item.BFcT86lS.js} +3 -2
- package/chunks/Search.Results.Item.CLmMBPz1.js +41 -0
- package/chunks/Search.Results.Item.Dkh2yo4p.js +1 -0
- package/chunks/card.module.8KnCe1uR.js +1 -0
- package/chunks/{card.module.Dy87qmTH.js → card.module.ByBYpexJ.js} +12 -6
- package/chunks/dom.DGM-dxLe.js +21 -0
- package/chunks/dom.zgzOBFUw.js +1 -0
- package/chunks/{form.context.B1PXIJNq.js → form.context.B26th8Od.js} +1 -1
- package/chunks/{form.context.CNWjF5qA.js → form.context.CfsTSQpm.js} +1 -1
- package/chunks/panel.module.DbEoAg1J.js +1 -0
- package/chunks/panel.module.RGiUyC84.js +30 -0
- package/chunks/tokens.BD_71qmL.js +19 -0
- package/chunks/tokens.Bc11gmpN.js +1 -0
- package/index.cjs.js +1 -1
- package/index.es.js +17 -15
- package/lib/ActionList/ActionList.Group.cjs.js +1 -1
- package/lib/ActionList/ActionList.Group.d.ts +7 -4
- package/lib/ActionList/ActionList.Group.es.js +2 -2
- package/lib/ActionList/ActionList.IconButton.cjs.js +1 -1
- package/lib/ActionList/ActionList.IconButton.es.js +1 -1
- package/lib/ActionList/ActionList.Item.cjs.js +1 -1
- package/lib/ActionList/ActionList.Item.es.js +3 -3
- package/lib/ActionList/ActionList.cjs.js +1 -1
- package/lib/ActionList/ActionList.d.ts +1 -1
- package/lib/ActionList/ActionList.es.js +54 -54
- package/lib/ActionList/useActionListChildren.cjs.js +1 -1
- package/lib/ActionList/useActionListChildren.es.js +2 -2
- package/lib/Autocomplete/Autocomplete.cjs.js +1 -1
- package/lib/Autocomplete/Autocomplete.es.js +1 -1
- package/lib/Autocomplete/AutocompleteDropdown.cjs.js +1 -1
- package/lib/Autocomplete/AutocompleteDropdown.es.js +1 -1
- package/lib/Autocomplete/useAutocompleteA11y.cjs.js +1 -1
- package/lib/Autocomplete/useAutocompleteA11y.es.js +1 -1
- package/lib/Autocomplete/useAutocompleteDropdown.cjs.js +1 -1
- package/lib/Autocomplete/useAutocompleteDropdown.es.js +1 -1
- package/lib/Box/utils.cjs.js +1 -0
- package/lib/Box/utils.d.ts +6 -0
- package/lib/Box/utils.es.js +12 -0
- package/lib/Button/Button.cjs.js +1 -1
- package/lib/Button/Button.es.js +1 -1
- package/lib/Card/Card.Body.cjs.js +1 -1
- package/lib/Card/Card.Body.es.js +1 -1
- package/lib/Card/Card.Content.cjs.js +1 -1
- package/lib/Card/Card.Content.es.js +12 -17
- package/lib/Card/Card.Footer.cjs.js +1 -1
- package/lib/Card/Card.Footer.d.ts +1 -1
- package/lib/Card/Card.Footer.es.js +1 -1
- package/lib/Card/Card.Header.cjs.js +1 -1
- package/lib/Card/Card.Header.es.js +1 -1
- package/lib/Card/Card.Media.cjs.js +1 -1
- package/lib/Card/Card.Media.es.js +1 -1
- package/lib/Card/Card.cjs.js +1 -1
- package/lib/Card/Card.d.ts +61 -18
- package/lib/Card/Card.es.js +181 -82
- package/lib/Card/CardContext.cjs.js +1 -1
- package/lib/Card/CardContext.d.ts +10 -8
- package/lib/Card/CardContext.es.js +7 -12
- package/lib/Card/CardGroup.cjs.js +1 -0
- package/lib/Card/CardGroup.d.ts +55 -0
- package/lib/Card/CardGroup.es.js +67 -0
- package/lib/Card/card.utils.cjs.js +1 -0
- package/lib/Card/card.utils.d.ts +7 -0
- package/lib/Card/card.utils.es.js +14 -0
- package/lib/Card/index.cjs.js +1 -1
- package/lib/Card/index.d.ts +9 -1
- package/lib/Card/index.es.js +4 -2
- package/lib/Card/useCardGroup.cjs.js +1 -0
- package/lib/Card/useCardGroup.d.ts +27 -0
- package/lib/Card/useCardGroup.es.js +42 -0
- package/lib/Card/useCardGroupValue.cjs.js +1 -0
- package/lib/Card/useCardGroupValue.d.ts +14 -0
- package/lib/Card/useCardGroupValue.es.js +29 -0
- package/lib/Checkbox/Checkbox.cjs.js +1 -1
- package/lib/Checkbox/Checkbox.es.js +1 -1
- package/lib/Dialog/Dialog.Trigger.cjs.js +1 -1
- package/lib/Dialog/Dialog.Trigger.es.js +7 -6
- package/lib/EmptyState/EmptyState.cjs.js +1 -1
- package/lib/EmptyState/EmptyState.es.js +1 -1
- package/lib/FileUpload/FileUpload.List.Item.cjs.js +1 -1
- package/lib/FileUpload/FileUpload.List.Item.es.js +20 -20
- package/lib/FileUpload/FileUpload.cjs.js +1 -1
- package/lib/FileUpload/FileUpload.es.js +1 -1
- package/lib/FloatingUI/index.cjs.js +1 -1
- package/lib/FloatingUI/index.d.ts +1 -0
- package/lib/FloatingUI/index.es.js +7 -5
- package/lib/FloatingUI/useBlur.cjs.js +1 -0
- package/lib/FloatingUI/useBlur.d.ts +8 -0
- package/lib/FloatingUI/useBlur.es.js +15 -0
- package/lib/FloatingUI/useTyping.cjs.js +1 -0
- package/lib/FloatingUI/useTyping.d.ts +10 -0
- package/lib/FloatingUI/useTyping.es.js +42 -0
- package/lib/Form/Form.cjs.js +1 -1
- package/lib/Form/Form.es.js +1 -1
- package/lib/Form/contexts/form.context.cjs.js +1 -1
- package/lib/Form/contexts/form.context.es.js +1 -1
- package/lib/Form/contexts/index.cjs.js +1 -1
- package/lib/Form/contexts/index.es.js +1 -1
- package/lib/Form/hooks/index.cjs.js +1 -1
- package/lib/Form/hooks/index.es.js +1 -1
- package/lib/Form/hooks/useFieldValidator.hook.cjs.js +1 -1
- package/lib/Form/hooks/useFieldValidator.hook.es.js +2 -2
- package/lib/HelperText/HelperText.cjs.js +1 -1
- package/lib/HelperText/HelperText.es.js +1 -1
- package/lib/HelperText/index.cjs.js +1 -1
- package/lib/HelperText/index.es.js +1 -1
- package/lib/InputChoiceGroup/InputChoiceGroup.cjs.js +1 -1
- package/lib/InputChoiceGroup/InputChoiceGroup.es.js +1 -1
- package/lib/Label/Label.cjs.js +1 -1
- package/lib/Label/Label.es.js +1 -1
- package/lib/Link/Link.cjs.js +1 -1
- package/lib/Link/Link.es.js +6 -6
- package/lib/NativeSelect/NativeSelect.cjs.js +1 -1
- package/lib/NativeSelect/NativeSelect.es.js +1 -1
- package/lib/Popover/Popover.cjs.js +1 -1
- package/lib/Popover/Popover.es.js +1 -1
- package/lib/Popover/Popover.trigger.cjs.js +1 -1
- package/lib/Popover/Popover.trigger.es.js +7 -6
- package/lib/Popover/Popover.utils.cjs.js +1 -1
- package/lib/Popover/Popover.utils.es.js +1 -1
- package/lib/ProgressBar/ProgressBar.cjs.js +1 -1
- package/lib/ProgressBar/ProgressBar.es.js +1 -1
- package/lib/RadioButton/RadioButton.cjs.js +1 -1
- package/lib/RadioButton/RadioButton.es.js +1 -1
- package/lib/Select/Select.cjs.js +1 -1
- package/lib/Select/Select.es.js +1 -1
- package/lib/Select/SelectDropdown.cjs.js +1 -1
- package/lib/Select/SelectDropdown.es.js +1 -1
- package/lib/Select/useSelectA11y.cjs.js +1 -1
- package/lib/Select/useSelectA11y.es.js +1 -1
- package/lib/SideNav/SideNavActionListGroup.cjs.js +1 -1
- package/lib/SideNav/SideNavActionListGroup.es.js +1 -1
- package/lib/SideNav/SideNavActionListItem.cjs.js +1 -1
- package/lib/SideNav/SideNavActionListItem.es.js +1 -1
- package/lib/SideNav/SideNavActionListItemExpandable.cjs.js +1 -1
- package/lib/SideNav/SideNavActionListItemExpandable.es.js +1 -1
- package/lib/SideNav/SideNavActionListItemFlyout.cjs.js +1 -1
- package/lib/SideNav/SideNavActionListItemFlyout.es.js +1 -1
- package/lib/Slider/DualSlider.cjs.js +1 -1
- package/lib/Slider/DualSlider.d.ts +1 -1
- package/lib/Slider/DualSlider.es.js +73 -72
- package/lib/Slider/SingleSlider.cjs.js +1 -1
- package/lib/Slider/SingleSlider.d.ts +1 -1
- package/lib/Slider/SingleSlider.es.js +52 -51
- package/lib/Slider/Slider.Error.cjs.js +1 -1
- package/lib/Slider/Slider.Error.es.js +1 -1
- package/lib/Slider/Slider.Thumb.cjs.js +1 -1
- package/lib/Slider/Slider.Thumb.es.js +1 -1
- package/lib/Slider/Slider.cjs.js +1 -1
- package/lib/Slider/Slider.d.ts +1 -3
- package/lib/Slider/Slider.es.js +13 -11
- package/lib/Slider/Slider.types.d.ts +1 -1
- package/lib/Slider/hooks/useSliderBase.cjs.js +1 -1
- package/lib/Slider/hooks/useSliderBase.es.js +1 -1
- package/lib/Switch/Switch.cjs.js +1 -1
- package/lib/Switch/Switch.es.js +1 -1
- package/lib/Tabs/Tabs.Group.cjs.js +1 -1
- package/lib/Tabs/Tabs.Group.es.js +1 -1
- package/lib/TextArea/TextArea.cjs.js +1 -1
- package/lib/TextArea/TextArea.es.js +1 -1
- package/lib/TextField/TextField.cjs.js +1 -1
- package/lib/TextField/TextField.es.js +1 -1
- package/lib/Tooltip/Tooltip.cjs.js +1 -1
- package/lib/Tooltip/Tooltip.es.js +9 -9
- package/lib/_Options/useSelectValue.cjs.js +1 -1
- package/lib/_Options/useSelectValue.es.js +1 -1
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +18 -16
- package/lib/wip/Panel/Panel.Body.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Body.d.ts +11 -0
- package/lib/wip/Panel/Panel.Body.es.js +17 -0
- package/lib/wip/Panel/Panel.Footer.Actions.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Footer.Actions.d.ts +17 -0
- package/lib/wip/Panel/Panel.Footer.Actions.es.js +22 -0
- package/lib/wip/Panel/Panel.Footer.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Footer.d.ts +20 -0
- package/lib/wip/Panel/Panel.Footer.es.js +24 -0
- package/lib/wip/Panel/Panel.Header.ContentAfter.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.ContentAfter.d.ts +11 -0
- package/lib/wip/Panel/Panel.Header.ContentAfter.es.js +17 -0
- package/lib/wip/Panel/Panel.Header.ContentBefore.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.ContentBefore.d.ts +11 -0
- package/lib/wip/Panel/Panel.Header.ContentBefore.es.js +17 -0
- package/lib/wip/Panel/Panel.Header.Description.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.Description.d.ts +11 -0
- package/lib/wip/Panel/Panel.Header.Description.es.js +17 -0
- package/lib/wip/Panel/Panel.Header.Heading.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.Heading.d.ts +11 -0
- package/lib/wip/Panel/Panel.Header.Heading.es.js +17 -0
- package/lib/wip/Panel/Panel.Header.Row.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.Row.d.ts +11 -0
- package/lib/wip/Panel/Panel.Header.Row.es.js +29 -0
- package/lib/wip/Panel/Panel.Header.Subheader.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.Subheader.d.ts +11 -0
- package/lib/wip/Panel/Panel.Header.Subheader.es.js +17 -0
- package/lib/wip/Panel/Panel.Header.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Header.d.ts +40 -0
- package/lib/wip/Panel/Panel.Header.es.js +34 -0
- package/lib/wip/Panel/Panel.cjs.js +1 -0
- package/lib/wip/Panel/Panel.context.cjs.js +1 -0
- package/lib/wip/Panel/Panel.context.d.ts +16 -0
- package/lib/wip/Panel/Panel.context.es.js +11 -0
- package/lib/wip/Panel/Panel.d.ts +45 -0
- package/lib/wip/Panel/Panel.es.js +43 -0
- package/lib/wip/Panel/Panel.types.cjs.js +1 -0
- package/lib/wip/Panel/Panel.types.d.ts +71 -0
- package/lib/wip/Panel/Panel.types.es.js +1 -0
- package/lib/wip/Panel/index.cjs.js +1 -0
- package/lib/wip/Panel/index.d.ts +12 -0
- package/lib/wip/Panel/index.es.js +4 -0
- package/lib/wip/Search/Search.Results.Item.cjs.js +1 -0
- package/lib/wip/Search/Search.Results.Item.d.ts +8 -0
- package/lib/wip/Search/Search.Results.Item.es.js +12 -0
- package/lib/wip/Search/Search.Results.cjs.js +1 -0
- package/lib/wip/Search/Search.Results.d.ts +12 -0
- package/lib/wip/Search/Search.Results.es.js +19 -0
- package/lib/wip/Search/Search.cjs.js +1 -0
- package/lib/wip/Search/Search.d.ts +88 -0
- package/lib/wip/Search/Search.es.js +157 -0
- package/lib/wip/Search/SearchDropdown.cjs.js +1 -0
- package/lib/wip/Search/SearchDropdown.d.ts +19 -0
- package/lib/wip/Search/SearchDropdown.es.js +71 -0
- package/lib/wip/Search/index.cjs.js +1 -0
- package/lib/wip/Search/index.d.ts +1 -0
- package/lib/wip/Search/index.es.js +4 -0
- package/lib/wip/Search/useSearchDropdown.cjs.js +1 -0
- package/lib/wip/Search/useSearchDropdown.d.ts +875 -0
- package/lib/wip/Search/useSearchDropdown.es.js +92 -0
- package/lib/wip/index.cjs.js +1 -1
- package/lib/wip/index.d.ts +2 -0
- package/lib/wip/index.es.js +6 -1
- package/package.json +6 -6
- package/utils/hooks/index.cjs.js +1 -1
- package/utils/hooks/index.d.ts +1 -0
- package/utils/hooks/index.es.js +33 -31
- package/utils/hooks/useDebounced.cjs.js +1 -0
- package/utils/hooks/useDebounced.d.ts +5 -0
- package/utils/hooks/useDebounced.es.js +18 -0
- package/utils/hooks/useEffectAfterMount.cjs.js +1 -0
- package/utils/hooks/useEffectAfterMount.d.ts +2 -0
- package/utils/hooks/useEffectAfterMount.es.js +14 -0
- package/utils/hooks/useInteractiveProps.cjs.js +1 -0
- package/utils/hooks/useInteractiveProps.d.ts +24 -0
- package/utils/hooks/useInteractiveProps.es.js +31 -0
- package/chunks/ActionList.Group.Bv9vgU22.js +0 -1
- package/chunks/ActionList.Group.DuNxYNZQ.js +0 -107
- package/chunks/ActionList.Item.D7Rg5iMb.js +0 -1
- package/chunks/card.module.BG9mkRao.js +0 -1
- package/chunks/dom.CVmkHCnh.js +0 -21
- package/chunks/dom.PCrm8EUc.js +0 -1
- package/chunks/tokens.Bgac_JPh.js +0 -1
- package/chunks/tokens.CXaNS8Cf.js +0 -13
|
@@ -10,7 +10,7 @@ import { f as j } from "../../chunks/floatingui.module.BcBFebz0.js";
|
|
|
10
10
|
import { p as D } from "../../chunks/popover.module.C6KFea25.js";
|
|
11
11
|
import "../_Options/Option.context.es.js";
|
|
12
12
|
import { Option as E } from "../_Options/Option.es.js";
|
|
13
|
-
import "../../chunks/form.context.
|
|
13
|
+
import "../../chunks/form.context.CfsTSQpm.js";
|
|
14
14
|
import "../Form/contexts/label.context.es.js";
|
|
15
15
|
import "../Form/contexts/helperText.context.es.js";
|
|
16
16
|
const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } = a("popover"), z = [E], I = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),e=require("../Form/hooks/useAccessibleId.hook.cjs.js");require("react/jsx-runtime");require("../../chunks/form.context.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),e=require("../Form/hooks/useAccessibleId.hook.cjs.js");require("react/jsx-runtime");require("../../chunks/form.context.B26th8Od.js");const l=require("clsx");function n({helperText:a,externalDescribedBy:b,error:s,errorShown:A,invalid:i}){const{id:o}=e.useAccessibleId(),{id:c}=e.useAccessibleId(),{id:t}=e.useAccessibleId(),{id:d}=e.useAccessibleId(),I=!!(s!=null&&s.length),u=l(a&&c,b)||void 0,r=l(I&&o,A&&t)||void 0;return _.useMemo(()=>({ids:{helperTextId:c,errorId:o,validationErrorsId:t,labelId:d},aria:{describedBy:u,errorMessage:r,invalid:i}}),[c,o,t,d,u,r,i])}exports.default=n;exports.useAutocompleteA11y=n;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useMemo as f } from "react";
|
|
2
2
|
import { useAccessibleId as o } from "../Form/hooks/useAccessibleId.hook.es.js";
|
|
3
3
|
import "react/jsx-runtime";
|
|
4
|
-
import "../../chunks/form.context.
|
|
4
|
+
import "../../chunks/form.context.CfsTSQpm.js";
|
|
5
5
|
import m from "clsx";
|
|
6
6
|
function A({
|
|
7
7
|
helperText: a,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("../../chunks/constants.hwjHOsvT.js"),ne=require("../../chunks/dom.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("../../chunks/constants.hwjHOsvT.js"),ne=require("../../chunks/dom.zgzOBFUw.js"),r=require("@floating-ui/react"),t=require("react"),se=`${te.prefix}combobox__field__chevron`,oe=j=>{const{disabled:x,readOnly:F,lastSelectedOptionIndex:l,fieldRef:p}=j,[n,$]=t.useState(!1),o=t.useRef(null),E=t.useRef(n);E.current=n;const R=r.useFloatingNodeId(),[I,z]=t.useState(null),[g,v]=t.useState(!0),[P,S]=t.useState(!1),b=t.useRef(!1),V=t.useCallback(e=>{I!==e&&(P?(S(!1),l===void 0&&v(!0)):v(!0),z(e))},[I,P,l]),f=t.useCallback((e,s,a)=>{var i;const u=l===void 0&&((i=o.current)==null?void 0:i.value)==="";!e&&a==="click"&&s instanceof MouseEvent&&!u&&!(s.target instanceof HTMLElement&&s.target.classList.contains(se))||($(e),e&&a==="click"&&(s instanceof MouseEvent||s instanceof PointerEvent)&&(S(!0),v(!1)))},[l,o]),{context:d,refs:c,floatingStyles:D}=r.useFloating({placement:"bottom-start",middleware:[{name:"overrideReference",fn:({rects:e})=>({reset:{rects:{...e,reference:ne.getElementScrollBoundingClientRect(p.current)??e.reference}}})},r.flip(),r.size({apply({elements:e,rects:s}){Object.assign(e.floating.style,{width:`${s.reference.width}px`})}})],whileElementsMounted:r.autoUpdate,open:n,onOpenChange:f,nodeId:R});o.current=c.domReference.current;const k=t.useCallback(e=>{b.current=!0,e.target!==o.current&&e.preventDefault()},[o]),y=t.useCallback(e=>{b.current=!1,e.target!==o.current&&e.preventDefault()},[o]),m=t.useRef([]),G=t.useRef([]),J=r.useClick(d,{enabled:!x&&!F,keyboardHandlers:!1}),Q=r.useRole(d,{role:"listbox"}),W=r.useDismiss(d,{outsidePress:!1}),O=m.current.length===0?null:I??null,M=t.useRef(l??null),X=t.useMemo(()=>n?M.current:(M.current=l??null,m.current.length===0?null:l??null),[l,n]),Y=r.useListNavigation(d,{enabled:!x&&!F,listRef:m,activeIndex:O,selectedIndex:X,onNavigate:V,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),{getReferenceProps:h,getFloatingProps:A,getItemProps:K}=r.useInteractions([Q,W,Y]),{getReferenceProps:_}=r.useInteractions([J]),[T,Z]=t.useState(n);t.useEffect(()=>Z(n),[n]);const C=n?"open":"closed",w=t.useCallback(e=>{var i;if(!n)return;const s=e.type==="focus"?e.target:e.relatedTarget,a=c.floating.current,u=p.current;if(a!=null&&a.contains(s)||u!=null&&u.contains(s)||b.current){e.preventDefault(),e.stopPropagation(),(i=o.current)==null||i.focus();return}f(!1,e.nativeEvent,"focus-out")},[p,n,o,c.floating,f]),q=t.useRef(n);t.useEffect(()=>{var e;q.current&&!n&&((e=o.current)==null||e.focus()),q.current=n},[n,o]);const N=t.useCallback((e={})=>({ref:c.setReference,...h({...e})}),[c.setReference,h]),B=t.useCallback((e={})=>({ref:p,onKeyDownCapture:s=>{var U;const a=E.current,u=o.current,i=u==null?void 0:u.getAttribute("aria-activedescendant"),L=i?document.getElementById(i):null;if(s.key==="Enter"&&a){if(s.preventDefault(),s.stopPropagation(),g&&L){const ee=new KeyboardEvent("keydown",s.nativeEvent);L.dispatchEvent(ee)}return}(U=e.onKeyDownCapture)==null||U.call(e,s)},onFocusCapture:w,onBlurCapture:w,..._({...e,onMouseDownCapture:k,onMouseUpCapture:y,onPointerDownCapture:k,onPointerUpCapture:y})}),[p,w,_,k,y,o,g]),H=t.useMemo(()=>({isMounted:T,status:C,getFloatingProps:A,getItemProps:K,floatingStyles:D,setOpen:f,nodeId:R,context:d,labelsRef:G,elementsRef:m,setFloating:c.setFloating,activeIndex:g?O:null}),[T,C,A,K,D,f,R,d,c.setFloating,O,g]);return t.useMemo(()=>({getFieldProps:B,getInputProps:N,dropdownProps:H,refs:c,open:n,setOpen:f,status:C,setDisplayActiveIndex:v}),[H,B,N,n,c,f,C])};exports.useAutocompleteDropdown=oe;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as re } from "../../chunks/constants.BBi77pmH.js";
|
|
2
|
-
import {
|
|
2
|
+
import { g as ce } from "../../chunks/dom.DGM-dxLe.js";
|
|
3
3
|
import { useFloatingNodeId as le, useFloating as ie, autoUpdate as ae, flip as ue, size as fe, useClick as de, useRole as pe, useDismiss as ge, useListNavigation as me, useInteractions as V } from "@floating-ui/react";
|
|
4
4
|
import { useState as g, useRef as u, useCallback as f, useMemo as E, useEffect as q } from "react";
|
|
5
5
|
const ve = `${re}combobox__field__chevron`, Oe = (G) => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/tokens.Bc11gmpN.js"),m={none:e.bmSemRadiusNone,xs:e.bmSemRadiusXs,sm:e.bmSemRadiusSm,md:e.bmSemRadiusMd,lg:e.bmSemRadiusLg,round:e.bmSemRadiusRound};exports.BOX_BORDER_RADIUS_TO_CSS_VAR=m;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { BoxBorderRadius } from '@viasat/beam-shared/components/box';
|
|
2
|
+
/**
|
|
3
|
+
* Maps BoxBorderRadius values to their corresponding CSS custom property references.
|
|
4
|
+
* Used when a component needs to pass radius as a CSS variable (e.g. --bm-card-radius-outer).
|
|
5
|
+
*/
|
|
6
|
+
export declare const BOX_BORDER_RADIUS_TO_CSS_VAR: Record<BoxBorderRadius, string>;
|
package/lib/Button/Button.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var et=require("../../assets/Button.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("../../chunks/classNames.DAeKwerT.js"),x=require("../../chunks/constants.hwjHOsvT.js"),D=require("clsx"),g=require("react"),G=require("../StateLayer/StateLayer.cjs.js"),K=require("../../chunks/form.context.
|
|
1
|
+
var et=require("../../assets/Button.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("../../chunks/classNames.DAeKwerT.js"),x=require("../../chunks/constants.hwjHOsvT.js"),D=require("clsx"),g=require("react"),G=require("../StateLayer/StateLayer.cjs.js"),K=require("../../chunks/form.context.B26th8Od.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const C=require("../../utils/spacing.cjs.js"),J=require("../Spinner/Spinner.cjs.js"),Q="button",{baseClassNamePrefix:nt,classModifierPrefix:i,subElementClassPrefix:h}=m.getBEMClassNames(Q),b={label:`${h}label`,loading:`${i}loading`,fluid:`${i}fluid`,iconOnly:`${i}icon-only`,loadingSpinner:`${h}loading-spinner`},U=(s,a)=>`${i}${a}-${s}`,n={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-button__icon-wrap":"bm-button__icon-wrap","bm-button":"bm-button","bm-button--sm":"bm-button--sm","bm-button--md":"bm-button--md","bm-button--lg":"bm-button--lg","bm-button--icon-only":"bm-button--icon-only","bm-button__label":"bm-button__label","bm-button--accent-filled":"bm-button--accent-filled","bm-button__loading-spinner":"bm-button__loading-spinner","bm-spinner__circle":"bm-spinner__circle","bm-spinner__circle-bg":"bm-spinner__circle-bg","bm-state-layer":"bm-state-layer","bm-state-layer--without-hover":"bm-state-layer--without-hover","bm-state-layer--without-active":"bm-state-layer--without-active","bm-button--accent-outline":"bm-button--accent-outline","bm-button--accent-ghost":"bm-button--accent-ghost","bm-button--accent-bare":"bm-button--accent-bare","bm-button--neutral-filled":"bm-button--neutral-filled","bm-button--neutral-outline":"bm-button--neutral-outline","bm-button--neutral-ghost":"bm-button--neutral-ghost","bm-button--neutral-bare":"bm-button--neutral-bare","bm-button--neutral-subtle-filled":"bm-button--neutral-subtle-filled","bm-button--neutral-subtle-outline":"bm-button--neutral-subtle-outline","bm-button--neutral-subtle-ghost":"bm-button--neutral-subtle-ghost","bm-button--neutral-subtle-bare":"bm-button--neutral-subtle-bare","bm-button--destructive-filled":"bm-button--destructive-filled","bm-button--destructive-outline":"bm-button--destructive-outline","bm-button--destructive-ghost":"bm-button--destructive-ghost","bm-button--destructive-bare":"bm-button--destructive-bare","bm-button--loading":"bm-button--loading","bm-spinner-wrap":"bm-spinner-wrap","bm-button--fluid":"bm-button--fluid"},V="button",{baseClassNamePrefix:X,classModifierPrefix:Y,subElementClassPrefix:Z}=m.getBEMClassNames(V),c=({children:s})=>t.jsx("span",{className:`${Z}icon-wrap`,children:s}),z=({loading:s,size:a,loadingValue:o,iconOnly:e,iconBefore:u,iconAfter:l,children:r})=>s?t.jsxs(t.Fragment,{children:[t.jsx(J.Spinner,{className:n[b.loadingSpinner],size:a==="sm"?"xxs":"xs",value:o}),!e&&t.jsx("span",{className:n[b.label],children:r})]}):t.jsxs(t.Fragment,{children:[u&&t.jsx(c,{children:u}),!e&&t.jsx("span",{className:n[b.label],children:r}),l&&t.jsx(c,{children:l})]}),tt=g.forwardRef(({appearance:s="accent",kind:a="filled",size:o="md",loading:e,loadingValue:u,fluid:l,width:r,iconBefore:y,iconAfter:N,iconOnly:d,productType:p,disabled:v=!1,theme:f,children:P,"aria-label":$,...j},S)=>{const q=y,B=e?void 0:N,w=U(a,s),{style:M,className:k,...A}=j,{ctxDisabled:E}=g.useContext(K.FormContext),_=v||E,[R,I]=C.partitionSpacingProps(A,C.MARGIN_PROP_NAMES),L=D(f&&x.themeClassName(f),p&&x.productTypeThemeClassName(p),n[X],n[w],e&&n[b.loading],l&&n[b.fluid],d&&n[b.iconOnly],o&&n[`${Y}${o}`],...m.generateSpacingClasses(R),k),T={...r&&!l&&{width:r},...M},F="default",{onClick:H,...O}=I,W=e?void 0:H;return t.jsxs("button",{className:L,disabled:_,style:T,tabIndex:e?-1:0,"aria-busy":e,"aria-label":$,"aria-disabled":_,onClick:W,...O,ref:S,children:[!e&&t.jsx(G.StateLayer,{appearance:F}),t.jsx(z,{loading:e,size:o,loadingValue:u,iconOnly:d,iconBefore:q,iconAfter:B,children:P})]})});exports.Button=tt;exports.ButtonIconWrap=c;
|
package/lib/Button/Button.es.js
CHANGED
|
@@ -5,7 +5,7 @@ import { t as T, d as W } from "../../chunks/constants.BBi77pmH.js";
|
|
|
5
5
|
import q from "clsx";
|
|
6
6
|
import H, { forwardRef as J } from "react";
|
|
7
7
|
import { StateLayer as Q } from "../StateLayer/StateLayer.es.js";
|
|
8
|
-
import { F as U } from "../../chunks/form.context.
|
|
8
|
+
import { F as U } from "../../chunks/form.context.CfsTSQpm.js";
|
|
9
9
|
import "../Form/contexts/label.context.es.js";
|
|
10
10
|
import "../Form/contexts/helperText.context.es.js";
|
|
11
11
|
import { partitionSpacingProps as V, MARGIN_PROP_NAMES as X } from "../../utils/spacing.es.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("clsx"),l=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const n=require("../../chunks/card.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("clsx"),l=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const n=require("../../chunks/card.module.8KnCe1uR.js"),{subElementClassPrefix:d}=l.getBEMClassNames("card"),i=`${d}body`,s=({children:e,className:r,...t})=>{const a=c(n.styles[i],r);return o.jsx("div",{className:a,...t,children:e})};s.displayName="Card.Body";exports.Body=s;
|
package/lib/Card/Card.Body.es.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import t from "clsx";
|
|
3
3
|
import { g as e } from "../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as l } from "../../chunks/card.module.
|
|
5
|
+
import { s as l } from "../../chunks/card.module.ByBYpexJ.js";
|
|
6
6
|
const { subElementClassPrefix: c } = e("card"), i = `${c}body`, d = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("clsx"),o=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const l=require("../../chunks/card.module.8KnCe1uR.js"),{subElementClassPrefix:i}=o.getBEMClassNames("card"),u=`${i}content`,e=({children:s,className:t,...n})=>{const r=c(l.styles[u],t);return a.jsx("div",{className:r,...n,children:s})};e.displayName="Card.Content";exports.Content=e;
|
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { g as
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import r from "clsx";
|
|
3
|
+
import { g as m } from "../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
...r
|
|
5
|
+
import { s as n } from "../../chunks/card.module.ByBYpexJ.js";
|
|
6
|
+
const { subElementClassPrefix: c } = m("card"), l = `${c}content`, i = ({
|
|
7
|
+
children: s,
|
|
8
|
+
className: t,
|
|
9
|
+
...o
|
|
11
10
|
}) => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
s && `${t}--density-${s}`,
|
|
15
|
-
e
|
|
16
|
-
);
|
|
17
|
-
return /* @__PURE__ */ m("div", { className: a, ...r, children: o });
|
|
11
|
+
const a = r(n[l], t);
|
|
12
|
+
return /* @__PURE__ */ e("div", { className: a, ...o, children: s });
|
|
18
13
|
};
|
|
19
|
-
|
|
14
|
+
i.displayName = "Card.Content";
|
|
20
15
|
export {
|
|
21
|
-
|
|
16
|
+
i as Content
|
|
22
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("clsx"),d=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const r=require("../../chunks/card.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("clsx"),d=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const r=require("../../chunks/card.module.8KnCe1uR.js"),{subElementClassPrefix:u}=d.getBEMClassNames("card"),N=`${u}footer`,a=({children:s,className:e,...t})=>{const o=i(r.styles[N],e);return l.jsx("div",{className:o,...t,children:s})};a.displayName="Card.Footer";const c=({layout:s="start",children:e,className:t,...o})=>{const n=`${u}footer__actions`,m=i(r.styles[n],r.styles[`${n}--${s}`],t);return l.jsx("div",{className:m,...o,children:e})};c.displayName="Card.Footer.Actions";a.Actions=c;exports.Actions=c;exports.Footer=a;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React, ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import { FooterActionLayout } from '@viasat/beam-shared/components/
|
|
2
|
+
import { FooterActionLayout } from '@viasat/beam-shared/components/footer';
|
|
3
3
|
export interface CardFooterProps extends ComponentPropsWithoutRef<'div'> {
|
|
4
4
|
/**
|
|
5
5
|
* Specify the content for the card footer
|
|
@@ -2,7 +2,7 @@ import { jsx as c } from "react/jsx-runtime";
|
|
|
2
2
|
import m from "clsx";
|
|
3
3
|
import { g as d } from "../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as r } from "../../chunks/card.module.
|
|
5
|
+
import { s as r } from "../../chunks/card.module.ByBYpexJ.js";
|
|
6
6
|
const { subElementClassPrefix: i } = d("card"), f = `${i}footer`, n = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("clsx"),g=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const o=require("../../chunks/card.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("clsx"),g=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const o=require("../../chunks/card.module.8KnCe1uR.js"),{subElementClassPrefix:c}=g.getBEMClassNames("card"),x=`${c}header`,r=({children:e,className:s,...a})=>{const t=d(o.styles[x],s);return n.jsx("div",{className:t,...a,children:e})},i=({children:e,className:s,...a})=>{const t=d(o.styles[`${c}header__heading`],s);return n.jsx("div",{className:t,...a,children:e})},l=({children:e,className:s,...a})=>{const t=d(o.styles[`${c}header__heading__text`],s);return n.jsx("div",{className:t,...a,children:e})},m=({children:e,className:s,...a})=>{const t=d(o.styles[`${c}header__heading__eyebrow`],s);return n.jsx("div",{className:t,...a,children:e})},u=({children:e,className:s,...a})=>{const t=d(o.styles[`${c}header__heading__supporting-text`],s);return n.jsx("div",{className:t,...a,children:e})},N=({children:e,className:s,...a})=>{const t=d(o.styles[`${c}header__content-before`],s);return n.jsx("div",{className:t,...a,children:e})},y=({children:e,className:s,...a})=>{const t=d(o.styles[`${c}header__content-after`],s);return n.jsx("div",{className:t,...a,children:e})};r.displayName="Card.Header";i.displayName="Card.Header.Heading";l.displayName="Card.Header.HeadingText";m.displayName="Card.Header.Eyebrow";u.displayName="Card.Header.SupportingText";N.displayName="Card.Header.ContentBefore";y.displayName="Card.Header.ContentAfter";r.Heading=i;r.HeadingText=l;r.Eyebrow=m;r.SupportingText=u;r.ContentBefore=N;r.ContentAfter=y;exports.ContentAfter=y;exports.ContentBefore=N;exports.Eyebrow=m;exports.Header=r;exports.Heading=i;exports.HeadingText=l;exports.SupportingText=u;
|
|
@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
|
|
|
2
2
|
import n from "clsx";
|
|
3
3
|
import { g } from "../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as d } from "../../chunks/card.module.
|
|
5
|
+
import { s as d } from "../../chunks/card.module.ByBYpexJ.js";
|
|
6
6
|
const { subElementClassPrefix: o } = g("card"), C = `${o}header`, c = ({
|
|
7
7
|
children: e,
|
|
8
8
|
className: a,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),j=require("clsx"),_=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const s=require("../../chunks/card.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),j=require("clsx"),_=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const s=require("../../chunks/card.module.8KnCe1uR.js"),R=require("../Box/Box.cjs.js"),$=require("./AspectRatio.cjs.js"),t=f.forwardRef(({children:o,position:a,aspectRatio:u="4:3",borderRadius:m,overlayColor:i,overlayContentTop:c,overlayContentMiddle:l,overlayContentBottom:d,className:n,...x},b)=>{const{baseClassNamePrefix:N,classModifierPrefix:q,subElementClassPrefix:r}=_.getBEMClassNames(`card__media-${a}`),y=j(s.styles[N],i&&s.styles[`${q}overlay-color-${i}`],n);return e.jsx(R.Box,{ref:b,className:y,borderRadius:a==="below"?m:void 0,...x,children:e.jsxs($.AspectRatio,{aspectRatio:u,children:[o,c&&e.jsx("div",{className:s.styles[`${r}overlay-top`],children:c}),l&&e.jsx("div",{className:s.styles[`${r}overlay-middle`],children:l}),d&&e.jsx("div",{className:s.styles[`${r}overlay-bottom`],children:d})]})})});t.displayName="Card.Media";exports.Media=t;
|
|
@@ -3,7 +3,7 @@ import { forwardRef as v } from "react";
|
|
|
3
3
|
import n from "clsx";
|
|
4
4
|
import { g as u } from "../../chunks/classNames.DNsS4J__.js";
|
|
5
5
|
import "../../chunks/constants.BBi77pmH.js";
|
|
6
|
-
import { s } from "../../chunks/card.module.
|
|
6
|
+
import { s } from "../../chunks/card.module.ByBYpexJ.js";
|
|
7
7
|
import { Box as M } from "../Box/Box.es.js";
|
|
8
8
|
import { AspectRatio as P } from "./AspectRatio.es.js";
|
|
9
9
|
const R = v(
|
package/lib/Card/Card.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),o=require("react"),P=require("clsx"),ne=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const de=require("../Box/Box.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const oe=require("../../utils/hooks/useInteractiveProps.cjs.js"),t=require("../../chunks/card.module.8KnCe1uR.js"),ce=require("../Box/utils.cjs.js"),ue=require("./Card.MediaAbove.cjs.js"),be=require("./Card.Header.cjs.js"),_e=require("./Card.MediaBelow.cjs.js"),fe=require("./Card.Body.cjs.js"),ye=require("./Card.Content.cjs.js"),Ce=require("./Card.Footer.cjs.js"),me=require("./CardContext.cjs.js"),pe=require("./useCardGroup.cjs.js"),he=require("../StateLayer/StateLayer.cjs.js"),{baseClassNamePrefix:c,classModifierPrefix:d,subElementClassPrefix:u}=ne.getBEMClassNames("card"),qe='button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',n=({children:R,className:k,density:N="md",borderColor:g,borderRadius:C,backgroundColor:B,shadow:E,type:S,as:L,disabled:T=!1,href:M,target:A,rel:j,onClick:s,selectionMode:O="single",showIndicator:G=!1,selected:H,defaultSelected:V=!1,onSelect:F,name:K,value:U,style:m,...b})=>{const p=me.useCardGroupContext();process.env.NODE_ENV!=="production"&&p&&S==="clickable"&&console.warn('Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.');const h=p?"selectable":S,q=!!h,a=h==="clickable",i=h==="selectable",{selected:v,handleChange:W,resolvedValue:X,isSelectionEligible:x,resolvedDisabled:r,resolvedName:z,resolvedShowIndicator:J,inputType:w}=pe.useCardGroup({cardGroup:p,selected:H,defaultSelected:V,value:U,id:b.id,disabled:T,name:K,selectionMode:O,showIndicator:G,onSelect:F}),I=o.useRef(null),_=L??(a&&M?"a":"div"),Q=o.useMemo(()=>C?{...m,"--bm-card-radius-outer":ce.BOX_BORDER_RADIUS_TO_CSS_VAR[C]}:m,[C,m]),f=o.useCallback(e=>{if(!e||!(e instanceof Element))return!1;const $=e.closest(qe);if(!$)return!1;const l=e.closest(`.${t.styles[c]}`);return $!==l},[]),Y=o.useCallback(e=>{if(r)return;if(f(e.target)){if(a&&_==="a"){const l=e.target,D=l==null?void 0:l.closest('a, [role="link"]');(!D||D===e.currentTarget)&&e.preventDefault()}return}if(a&&(s==null||s(e)),i){if(!x)return;const l=e.target;if(l.tagName==="INPUT"&&l.hasAttribute("data-card-input"))return;I.current&&I.current.click()}},[a,i,x,f,_,s,r]),Z=o.useCallback(e=>{r||e.key!=="Enter"&&e.key!==" "||f(e.target)||(e.preventDefault(),a&&(s==null||s(e)))},[a,f,s,r]),ee=P(t.styles[c],!B&&t.styles[`${c}--default-background`],!E&&t.styles[`${c}--default-shadow`],!g&&t.styles[`${c}--default-border`],q&&t.styles[`${d}interactive`],a&&t.styles[`${d}clickable`],i&&t.styles[`${d}selectable`],i&&v&&t.styles[`${d}selected`],r&&t.styles[`${d}disabled`],N&&t.styles[`${d}density-${N}`],k),te=oe.useInteractiveProps({isInteractive:q,disabled:r,isClickable:a,elementType:_,href:a?M:void 0,target:a?A:void 0,rel:a?j:void 0,onClick:Y,onKeyDown:Z}),ae=()=>!i||!x?null:y.jsx("input",{ref:I,type:w,className:t.styles[`${u}hidden-input`],checked:v,disabled:r,name:z,value:X,onChange:W,"aria-label":b["aria-label"],"aria-labelledby":b["aria-labelledby"],"data-card-input":""}),re=()=>{if(!i||!J)return null;const e=P(t.styles[`${u}selection-indicator`],t.styles[`${u}selection-indicator--${w}`],v&&t.styles[`${u}selection-indicator--checked`],r&&t.styles[`${u}selection-indicator--disabled`]);return y.jsx("span",{className:e,"aria-hidden":"true"})},{"aria-label":se,"aria-labelledby":ie,...le}=b;return y.jsxs(de.Box,{as:_,className:ee,borderColor:g,borderWidth:"md",backgroundColor:B,shadow:E,style:Q,...te,...le,"aria-label":i?void 0:se,"aria-labelledby":i?void 0:ie,children:[ae(),re(),q&&!r&&y.jsx(he.StateLayer,{}),R]})};n.displayName="Card";n.MediaAbove=ue.MediaAbove;n.MediaBelow=_e.MediaBelow;n.Header=be.Header;n.Body=fe.Body;n.Content=ye.Content;n.Footer=Ce.Footer;exports.Card=n;
|
package/lib/Card/Card.d.ts
CHANGED
|
@@ -1,66 +1,109 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { BoxProps } from '../Box/Box';
|
|
3
3
|
import { BoxBackgroundColor, BoxBorderColor, BoxBorderRadius, BoxShadow } from '@viasat/beam-shared/components/box';
|
|
4
|
-
import { CardDensity, CardType } from '@viasat/beam-shared/components/card';
|
|
4
|
+
import { CardDensity, CardGroupSelectionMode, CardType } from '@viasat/beam-shared/components/card';
|
|
5
5
|
export interface CardProps extends Pick<BoxProps, 'borderColor' | 'borderRadius' | 'backgroundColor' | 'm' | 'mBefore' | 'mAfter' | 'mBottom' | 'mTop' | 'mx' | 'my' | 'shadow'>, React.HTMLAttributes<HTMLElement> {
|
|
6
6
|
/**
|
|
7
7
|
* Specify the content and sub-components of the Card
|
|
8
8
|
*/
|
|
9
|
-
children: React.ReactNode;
|
|
9
|
+
'children': React.ReactNode;
|
|
10
10
|
/**
|
|
11
11
|
* Specify the density of the Card
|
|
12
12
|
* @default 'md'
|
|
13
13
|
*/
|
|
14
|
-
density?: CardDensity;
|
|
14
|
+
'density'?: CardDensity;
|
|
15
15
|
/**
|
|
16
16
|
* Specify the border color of the Card
|
|
17
17
|
*/
|
|
18
|
-
borderColor?: BoxBorderColor;
|
|
18
|
+
'borderColor'?: BoxBorderColor;
|
|
19
19
|
/**
|
|
20
20
|
* Specify the border radius of the Card
|
|
21
21
|
*/
|
|
22
|
-
borderRadius?: BoxBorderRadius;
|
|
22
|
+
'borderRadius'?: BoxBorderRadius;
|
|
23
23
|
/**
|
|
24
24
|
* Specify the surface color of the Card
|
|
25
25
|
*/
|
|
26
|
-
backgroundColor?: BoxBackgroundColor;
|
|
26
|
+
'backgroundColor'?: BoxBackgroundColor;
|
|
27
27
|
/**
|
|
28
28
|
* Specify a shadow on the Card
|
|
29
29
|
*/
|
|
30
|
-
shadow?: BoxShadow;
|
|
30
|
+
'shadow'?: BoxShadow;
|
|
31
31
|
/**
|
|
32
|
-
* Specify the interactive type of the Card.
|
|
32
|
+
* Specify the interactive type of the Card. When type="selectable", you should provide either aria-label or aria-labelledby for the selection input to ensure accessibility
|
|
33
33
|
* @default undefined
|
|
34
34
|
*/
|
|
35
|
-
type?: CardType;
|
|
35
|
+
'type'?: CardType;
|
|
36
36
|
/**
|
|
37
|
-
* Specify the HTML element type of the Card when interactive
|
|
37
|
+
* Specify the HTML element type of the Card when interactive
|
|
38
38
|
*/
|
|
39
|
-
as?: 'div' | 'a' | 'button';
|
|
39
|
+
'as'?: 'div' | 'a' | 'button';
|
|
40
40
|
/**
|
|
41
|
-
* Specify if the Card is disabled. Only applies when type is set
|
|
41
|
+
* Specify if the Card is disabled. Only applies when type is set
|
|
42
42
|
* @default false
|
|
43
43
|
*/
|
|
44
|
-
disabled?: boolean;
|
|
44
|
+
'disabled'?: boolean;
|
|
45
45
|
/**
|
|
46
46
|
* Specify the href for the Card when type="clickable" and as="a"
|
|
47
47
|
*/
|
|
48
|
-
href?: string;
|
|
48
|
+
'href'?: string;
|
|
49
49
|
/**
|
|
50
50
|
* Specify the target for the Card link (e.g., "_blank")
|
|
51
51
|
*/
|
|
52
|
-
target?: string;
|
|
52
|
+
'target'?: string;
|
|
53
53
|
/**
|
|
54
54
|
* Specify the rel attribute for the Card link
|
|
55
55
|
*/
|
|
56
|
-
rel?: string;
|
|
56
|
+
'rel'?: string;
|
|
57
57
|
/**
|
|
58
58
|
* Specify a click handler for the Card when type="clickable"
|
|
59
59
|
*/
|
|
60
|
-
onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
60
|
+
'onClick'?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Selection mode when type="selectable". Ignored when Card is inside a CardGroup (group's selectionMode wins)
|
|
63
|
+
* @default 'single'
|
|
64
|
+
*/
|
|
65
|
+
'selectionMode'?: CardGroupSelectionMode;
|
|
66
|
+
/**
|
|
67
|
+
* When true, shows a visual selection indicator (radio or checkbox) on the Card
|
|
68
|
+
* @default false
|
|
69
|
+
*/
|
|
70
|
+
'showIndicator'?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Specify if the Card is selected (controlled). Only applies when type="selectable"
|
|
73
|
+
*/
|
|
74
|
+
'selected'?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Specify if the Card is initially selected (uncontrolled). Only applies when type="selectable"
|
|
77
|
+
*/
|
|
78
|
+
'defaultSelected'?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Callback when selection changes. Only applies when type="selectable"
|
|
81
|
+
*/
|
|
82
|
+
'onSelect'?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
83
|
+
/**
|
|
84
|
+
* Name attribute for the underlying input when type="selectable".
|
|
85
|
+
* Used for form integration
|
|
86
|
+
*/
|
|
87
|
+
'name'?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Value attribute for the underlying input when type="selectable".
|
|
90
|
+
* Used for form integration
|
|
91
|
+
*
|
|
92
|
+
* > When used inside a selectable CardGroup, this (or `id`) is required so the
|
|
93
|
+
* group can manage selection state
|
|
94
|
+
*/
|
|
95
|
+
'value'?: string;
|
|
96
|
+
/**
|
|
97
|
+
* Accessible label for the selectable Card's input. Required when type="selectable"
|
|
98
|
+
*/
|
|
99
|
+
'aria-label'?: string;
|
|
100
|
+
/**
|
|
101
|
+
* ID(s) of elements that label the selection input. Alternative to aria-label when type="selectable"
|
|
102
|
+
*/
|
|
103
|
+
'aria-labelledby'?: string;
|
|
61
104
|
}
|
|
62
105
|
export declare const Card: {
|
|
63
|
-
({ children, className: _className, density, borderColor, borderRadius, backgroundColor, shadow, type, as, disabled, href, target, rel, onClick, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
106
|
+
({ children, className: _className, density, borderColor, borderRadius, backgroundColor, shadow, type, as, disabled: _disabled, href, target, rel, onClick, selectionMode: _selectionMode, showIndicator: _showIndicator, selected: controlledSelected, defaultSelected, onSelect, name: _name, value: _value, style, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
64
107
|
displayName: string;
|
|
65
108
|
MediaAbove: {
|
|
66
109
|
(props: import('./Card.MediaAbove').CardMediaAboveProps): import("react/jsx-runtime").JSX.Element;
|