@carbon-labs/react-ui-shell 0.85.0 → 0.86.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.
Files changed (49) hide show
  1. package/es/__stories__/AppIcons.d.ts +4 -0
  2. package/es/components/HeaderPopover.js +3 -1
  3. package/lib/__stories__/AppIcons.d.ts +4 -0
  4. package/lib/components/HeaderPopover.js +3 -1
  5. package/lib/es/_virtual/_rollupPluginBabelHelpers.d.ts +8 -0
  6. package/lib/es/components/HeaderContainer.d.ts +20 -0
  7. package/lib/es/components/HeaderDivider.d.ts +12 -0
  8. package/lib/es/components/HeaderOverflowPanel.d.ts +2 -0
  9. package/lib/es/components/HeaderPopover.d.ts +64 -0
  10. package/lib/es/components/Link.d.ts +20 -0
  11. package/lib/es/components/Profile.d.ts +12 -0
  12. package/lib/es/components/SharkFinIcon.d.ts +12 -0
  13. package/lib/es/components/SideNav.d.ts +36 -0
  14. package/lib/es/components/SideNavFlyoutMenu.d.ts +34 -0
  15. package/lib/es/components/SideNavItems.d.ts +16 -0
  16. package/lib/es/components/SideNavLink.d.ts +3 -0
  17. package/lib/es/components/SideNavLinkPopover.d.ts +26 -0
  18. package/lib/es/components/SideNavMenu.d.ts +2 -0
  19. package/lib/es/components/SideNavMenuItem.d.ts +2 -0
  20. package/lib/es/components/SideNavSlot.d.ts +16 -0
  21. package/lib/es/components/SideNavTitle.d.ts +14 -0
  22. package/lib/es/components/SideNavToggle.d.ts +3 -0
  23. package/lib/es/components/TrialCountdown.d.ts +18 -0
  24. package/lib/es/components/_utils.d.ts +7 -0
  25. package/lib/es/index.d.ts +16 -0
  26. package/lib/es/internal/environment.d.ts +12 -0
  27. package/lib/es/internal/keyboard/keys.d.ts +96 -0
  28. package/lib/es/internal/keyboard/match.d.ts +61 -0
  29. package/lib/es/internal/setupGetInstanceId.d.ts +12 -0
  30. package/lib/es/internal/useDelayedState.d.ts +17 -0
  31. package/lib/es/internal/useEvent.d.ts +17 -0
  32. package/lib/es/internal/useId.d.ts +14 -0
  33. package/lib/es/internal/useIdPrefix.d.ts +6 -0
  34. package/lib/es/internal/useMatchMedia.d.ts +7 -0
  35. package/lib/es/internal/useMergedRefs.d.ts +12 -0
  36. package/lib/es/internal/usePrefix.d.ts +14 -0
  37. package/lib/es/internal/warning.d.ts +13 -0
  38. package/lib/es/prop-types/AriaPropTypes.d.ts +1 -0
  39. package/lib/es/prop-types/deprecate.d.ts +2 -0
  40. package/lib/es/prop-types/isRequiredOneOf.d.ts +20 -0
  41. package/package.json +2 -2
  42. package/scss/styles/_content.scss +4 -4
  43. package/scss/styles/_header-divider.scss +2 -2
  44. package/scss/styles/_header-overflow-panel.scss +4 -4
  45. package/scss/styles/_header.scss +11 -5
  46. package/scss/styles/_profile.scss +4 -16
  47. package/scss/styles/_shark-fin-icon.scss +1 -1
  48. package/scss/styles/_side-nav.scss +10 -10
  49. package/scss/styles/_trial-countdown.scss +5 -5
@@ -0,0 +1,4 @@
1
+ export function CarbonDesignSystem(): import("react/jsx-runtime").JSX.Element;
2
+ export function CarbonIBMDotCom(): import("react/jsx-runtime").JSX.Element;
3
+ export function CarbonforIBMProducts(): import("react/jsx-runtime").JSX.Element;
4
+ export function IBMTelemetry(): import("react/jsx-runtime").JSX.Element;
@@ -105,9 +105,11 @@ function HeaderPopover({
105
105
  align: align,
106
106
  autoAlign: autoAlign,
107
107
  as: as,
108
+ backgroundToken: "background",
109
+ border: true,
108
110
  isTabTip: true,
109
111
  className: className,
110
- dropShadow: false,
112
+ dropShadow: true,
111
113
  highContrast: false,
112
114
  open: open,
113
115
  onKeyDown: onKeyDown,
@@ -0,0 +1,4 @@
1
+ export function CarbonDesignSystem(): import("react/jsx-runtime").JSX.Element;
2
+ export function CarbonIBMDotCom(): import("react/jsx-runtime").JSX.Element;
3
+ export function CarbonforIBMProducts(): import("react/jsx-runtime").JSX.Element;
4
+ export function IBMTelemetry(): import("react/jsx-runtime").JSX.Element;
@@ -107,9 +107,11 @@ function HeaderPopover({
107
107
  align: align,
108
108
  autoAlign: autoAlign,
109
109
  as: as,
110
+ backgroundToken: "background",
111
+ border: true,
110
112
  isTabTip: true,
111
113
  className: className,
112
- dropShadow: false,
114
+ dropShadow: true,
113
115
  highContrast: false,
114
116
  open: open,
115
117
  onKeyDown: onKeyDown,
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ declare function _extends(...args: any[]): any;
8
+ export { _extends as extends, _extends as extends };
@@ -0,0 +1,20 @@
1
+ export function HeaderContainer({ render: Children, isSideNavExpanded, isSwitcherExpanded, isProfileExpanded, themeSetting, ...rest }: {
2
+ [x: string]: any;
3
+ render: any;
4
+ isSideNavExpanded?: boolean | undefined;
5
+ isSwitcherExpanded?: boolean | undefined;
6
+ isProfileExpanded?: boolean | undefined;
7
+ themeSetting: any;
8
+ }): React__default.CElement<any, React__default.Component<any, any, any>>;
9
+ export namespace HeaderContainer {
10
+ namespace propTypes {
11
+ let isProfileExpanded: PropTypes.Requireable<boolean>;
12
+ let isSideNavExpanded: PropTypes.Requireable<boolean>;
13
+ let isSwitcherExpanded: PropTypes.Requireable<boolean>;
14
+ let render: PropTypes.Validator<NonNullable<PropTypes.ReactComponentLike>>;
15
+ }
16
+ let displayName: string;
17
+ }
18
+ import React__default from 'react';
19
+ import PropTypes from 'prop-types';
20
+ export { HeaderContainer as default };
@@ -0,0 +1,12 @@
1
+ export function HeaderDivider({ className }: {
2
+ className: any;
3
+ }): React__default.DetailedReactHTMLElement<{
4
+ className: string;
5
+ }, HTMLElement>;
6
+ export namespace HeaderDivider {
7
+ namespace propTypes {
8
+ let className: PropTypes.Requireable<string>;
9
+ }
10
+ }
11
+ import React__default from 'react';
12
+ import PropTypes from 'prop-types';
@@ -0,0 +1,2 @@
1
+ export const HeaderOverflowPanel: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
2
+ import React__default from 'react';
@@ -0,0 +1,64 @@
1
+ /**
2
+ * Used as a container for the button and content of a toggletip. This component
3
+ * is responsible for coordinating between interactions with the button and the
4
+ * visibility of the content
5
+ */
6
+ export function HeaderPopover({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: {
7
+ [x: string]: any;
8
+ align: any;
9
+ as: any;
10
+ autoAlign: any;
11
+ className: any;
12
+ children: any;
13
+ defaultOpen?: boolean | undefined;
14
+ }): React__default.DetailedReactHTMLElement<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
15
+ export namespace HeaderPopover {
16
+ namespace propTypes {
17
+ let align: PropTypes.Requireable<string>;
18
+ let alignmentAxisOffset: PropTypes.Requireable<number>;
19
+ let as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
20
+ let autoAlign: PropTypes.Requireable<boolean>;
21
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
22
+ let className: PropTypes.Requireable<string>;
23
+ let defaultOpen: PropTypes.Requireable<boolean>;
24
+ }
25
+ }
26
+ /**
27
+ * `ToggletipActions` is a container for one or two actions present at the base
28
+ * of a toggletip. It is used for layout of these items.
29
+ */
30
+ export const HeaderPopoverActions: typeof ToggletipActions;
31
+ /**
32
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
33
+ * clicks and keyboard interactions.
34
+ */
35
+ export function HeaderPopoverButton({ children, className: customClassName, label, as: BaseComponent, ...rest }: {
36
+ [x: string]: any;
37
+ children: any;
38
+ className: any;
39
+ label?: string | undefined;
40
+ as: any;
41
+ }): React__default.DetailedReactHTMLElement<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
42
+ export namespace HeaderPopoverButton {
43
+ export namespace propTypes_1 {
44
+ let children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
45
+ export { children_1 as children };
46
+ let className_1: PropTypes.Requireable<string>;
47
+ export { className_1 as className };
48
+ export let label: PropTypes.Requireable<string>;
49
+ }
50
+ export { propTypes_1 as propTypes };
51
+ }
52
+ /**
53
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
54
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
55
+ * be rendered inside of the popover for this component.
56
+ */
57
+ export function HeaderPopoverContent({ children, className, ...rest }: {
58
+ [x: string]: any;
59
+ children: any;
60
+ className: any;
61
+ }): React__default.FunctionComponentElement<import("@carbon/react").ToggletipContentProps & React__default.RefAttributes<HTMLDivElement>>;
62
+ import React__default from 'react';
63
+ import PropTypes from 'prop-types';
64
+ import { ToggletipActions } from '@carbon/react';
@@ -0,0 +1,20 @@
1
+ export namespace LinkPropTypes {
2
+ let as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
3
+ let element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
4
+ let isSideNavExpanded: PropTypes.Requireable<boolean>;
5
+ }
6
+ /**
7
+ * Link is a custom component that allows us to supporting rendering elements
8
+ * other than `a` in our markup. The goal is to allow users to support passing
9
+ * in their own components to support use-cases like `react-router` or
10
+ * `@reach/router`
11
+ */
12
+ declare const Link: React__default.ForwardRefExoticComponent<Omit<{
13
+ [x: string]: any;
14
+ element: any;
15
+ as: any;
16
+ isSideNavExpanded: any;
17
+ }, "ref"> & React__default.RefAttributes<any>>;
18
+ import PropTypes from 'prop-types';
19
+ import React__default from 'react';
20
+ export { Link as default };
@@ -0,0 +1,12 @@
1
+ export const Profile: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
2
+ export const ProfileReadOnly: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
3
+ export const ProfileUserInfo: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
4
+ export const ReadOnly: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
5
+ /**
6
+ * -------
7
+ * Exports
8
+ * -------
9
+ */
10
+ export const Root: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
11
+ export const UserInfo: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
12
+ import React__default from 'react';
@@ -0,0 +1,12 @@
1
+ export function SharkFinIcon({ className: customClassName }: {
2
+ className: any;
3
+ }): React__default.ReactSVGElement;
4
+ export namespace SharkFinIcon {
5
+ namespace propTypes {
6
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
7
+ let className: PropTypes.Requireable<string>;
8
+ let small: PropTypes.Requireable<boolean>;
9
+ }
10
+ }
11
+ import React__default from 'react';
12
+ import PropTypes from 'prop-types';
@@ -0,0 +1,36 @@
1
+ export let SIDE_NAV_TYPE: {};
2
+ export const SideNav: React__default.ForwardRefExoticComponent<Omit<{
3
+ [x: string]: any;
4
+ expanded: any;
5
+ defaultExpanded?: boolean | undefined;
6
+ isChildOfHeader?: boolean | undefined;
7
+ "aria-label": any;
8
+ "aria-labelledby": any;
9
+ children: any;
10
+ onToggle: any;
11
+ className: any;
12
+ hideRailBreakpointDown: any;
13
+ href: any;
14
+ isFixedNav?: boolean | undefined;
15
+ isRail: any;
16
+ isPersistent?: boolean | undefined;
17
+ isTreeview: any;
18
+ navType?: any;
19
+ addFocusListeners?: boolean | undefined;
20
+ addMouseListeners?: boolean | undefined;
21
+ onOverlayClick: any;
22
+ onSideNavBlur: any;
23
+ enterDelayMs?: number | undefined;
24
+ isCollapsible?: boolean | undefined;
25
+ hideOverlay?: boolean | undefined;
26
+ translateWithId?: ((id: any) => string) | undefined;
27
+ headerOverflowPanel: any;
28
+ }, "ref"> & React__default.RefAttributes<any>>;
29
+ export const SideNavContext: React__default.Context<{}>;
30
+ export const translationIds: {
31
+ 'collapse.sidenav': string;
32
+ 'expand.sidenav': string;
33
+ 'enable.autoexpand': string;
34
+ 'disable.autoexpand': string;
35
+ };
36
+ import React__default from 'react';
@@ -0,0 +1,34 @@
1
+ export function SideNavFlyoutMenu({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, dropShadow, highContrast, menuContent, selected, title, ...rest }: {
2
+ [x: string]: any;
3
+ align?: string | undefined;
4
+ className: any;
5
+ children: any;
6
+ label: any;
7
+ description: any;
8
+ enterDelayMs?: number | undefined;
9
+ leaveDelayMs?: number | undefined;
10
+ defaultOpen?: boolean | undefined;
11
+ dropShadow?: boolean | undefined;
12
+ highContrast?: boolean | undefined;
13
+ menuContent: any;
14
+ selected?: boolean | undefined;
15
+ title: any;
16
+ }): React__default.FunctionComponentElement<import("@carbon/react").PopoverProps<React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>>>;
17
+ export namespace SideNavFlyoutMenu {
18
+ namespace propTypes {
19
+ let align: PropTypes.Requireable<string>;
20
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
21
+ let className: PropTypes.Requireable<string>;
22
+ let defaultOpen: PropTypes.Requireable<boolean>;
23
+ let description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
24
+ let dropShadow: PropTypes.Requireable<boolean>;
25
+ let enterDelayMs: PropTypes.Requireable<number>;
26
+ let label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
27
+ let leaveDelayMs: PropTypes.Requireable<number>;
28
+ let menuContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
29
+ let selected: PropTypes.Requireable<boolean>;
30
+ let title: PropTypes.Requireable<string>;
31
+ }
32
+ }
33
+ import React__default from 'react';
34
+ import PropTypes from 'prop-types';
@@ -0,0 +1,16 @@
1
+ export function SideNavItems({ className: customClassName, children, isSideNavExpanded, accessibilityLabel: accessibilityLabel }: {
2
+ className: any;
3
+ children: any;
4
+ isSideNavExpanded: any;
5
+ accessibilityLabel: any;
6
+ }): React__default.DetailedReactHTMLElement<any, HTMLElement>;
7
+ export namespace SideNavItems {
8
+ let displayName: string;
9
+ namespace propTypes {
10
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
11
+ let className: PropTypes.Requireable<string>;
12
+ let isSideNavExpanded: PropTypes.Requireable<boolean>;
13
+ }
14
+ }
15
+ import React__default from 'react';
16
+ import PropTypes from 'prop-types';
@@ -0,0 +1,3 @@
1
+ export const SideNavLink: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
2
+ import React__default from 'react';
3
+ export { SideNavLink as default };
@@ -0,0 +1,26 @@
1
+ export function SideNavLinkPopover({ className, children, ...rest }: {
2
+ [x: string]: any;
3
+ className: any;
4
+ children: any;
5
+ }): React__default.FunctionComponentElement<import("@carbon/react").IconButtonProps & React__default.RefAttributes<unknown>>;
6
+ export namespace SideNavLinkPopover {
7
+ namespace propTypes {
8
+ let align: PropTypes.Requireable<string>;
9
+ let autoAlign: PropTypes.Requireable<boolean>;
10
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
11
+ let className: PropTypes.Requireable<string>;
12
+ let closeOnActivation: PropTypes.Requireable<boolean>;
13
+ let defaultOpen: PropTypes.Requireable<boolean>;
14
+ let disabled: PropTypes.Requireable<boolean>;
15
+ let enterDelayMs: PropTypes.Requireable<number>;
16
+ let href: PropTypes.Requireable<string>;
17
+ let isSelected: PropTypes.Requireable<boolean>;
18
+ let label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
19
+ let leaveDelayMs: PropTypes.Requireable<number>;
20
+ let size: PropTypes.Requireable<string>;
21
+ let wrapperClasses: PropTypes.Requireable<string>;
22
+ }
23
+ }
24
+ import React__default from 'react';
25
+ import PropTypes from 'prop-types';
26
+ export { SideNavLinkPopover as default };
@@ -0,0 +1,2 @@
1
+ export const SideNavMenu: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
2
+ import React__default from 'react';
@@ -0,0 +1,2 @@
1
+ export const SideNavMenuItem: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
2
+ import React__default from 'react';
@@ -0,0 +1,16 @@
1
+ export function SideNavSlot({ children, className: customClassName, renderIcon: IconElement }: {
2
+ children: any;
3
+ className: any;
4
+ renderIcon: any;
5
+ }): React__default.DetailedReactHTMLElement<{
6
+ className: string;
7
+ }, HTMLElement>;
8
+ export namespace SideNavSlot {
9
+ namespace propTypes {
10
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
11
+ let className: PropTypes.Requireable<string>;
12
+ let renderIcon: PropTypes.Requireable<object>;
13
+ }
14
+ }
15
+ import React__default from 'react';
16
+ import PropTypes from 'prop-types';
@@ -0,0 +1,14 @@
1
+ export function SideNavTitle({ children, className: customClassName }: {
2
+ children: any;
3
+ className: any;
4
+ }): React__default.FunctionComponentElement<{
5
+ children?: React__default.ReactNode | undefined;
6
+ }>;
7
+ export namespace SideNavTitle {
8
+ namespace propTypes {
9
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
10
+ let className: PropTypes.Requireable<string>;
11
+ }
12
+ }
13
+ import React__default from 'react';
14
+ import PropTypes from 'prop-types';
@@ -0,0 +1,3 @@
1
+ export const SideNavToggle: React__default.ForwardRefExoticComponent<React__default.RefAttributes<any>>;
2
+ import React__default from 'react';
3
+ export { SideNavToggle as default };
@@ -0,0 +1,18 @@
1
+ export function TrialCountdown({ className, count, text, warning }: {
2
+ className: any;
3
+ count: any;
4
+ text?: string | undefined;
5
+ warning?: boolean | undefined;
6
+ }): React__default.DetailedReactHTMLElement<{
7
+ className: string;
8
+ }, HTMLElement>;
9
+ export namespace TrialCountdown {
10
+ namespace propTypes {
11
+ let className: PropTypes.Requireable<string>;
12
+ let count: PropTypes.Validator<number>;
13
+ let text: PropTypes.Requireable<string>;
14
+ let warning: PropTypes.Requireable<boolean>;
15
+ }
16
+ }
17
+ import React__default from 'react';
18
+ import PropTypes from 'prop-types';
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export const CARBON_SIDENAV_ITEMS: string[];
@@ -0,0 +1,16 @@
1
+ export { SideNavItems } from "./components/SideNavItems.js";
2
+ export { SideNavLink } from "./components/SideNavLink.js";
3
+ export { SideNavLinkPopover } from "./components/SideNavLinkPopover.js";
4
+ export { SideNavMenu } from "./components/SideNavMenu.js";
5
+ export { SideNavMenuItem } from "./components/SideNavMenuItem.js";
6
+ export { HeaderContainer } from "./components/HeaderContainer.js";
7
+ export { SharkFinIcon } from "./components/SharkFinIcon.js";
8
+ export { HeaderDivider } from "./components/HeaderDivider.js";
9
+ export { TrialCountdown } from "./components/TrialCountdown.js";
10
+ export { Profile };
11
+ export { HeaderOverflowPanel } from "./components/HeaderOverflowPanel.js";
12
+ export { SideNavSlot } from "./components/SideNavSlot.js";
13
+ export { SideNavTitle } from "./components/SideNavTitle.js";
14
+ import * as Profile from './components/Profile.js';
15
+ export { SIDE_NAV_TYPE, SideNav } from "./components/SideNav.js";
16
+ export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent } from "./components/HeaderPopover.js";
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * Indicate whether current execution environment can access the DOM.
9
+ *
10
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
11
+ */
12
+ export const canUseDOM: boolean;
@@ -0,0 +1,96 @@
1
+ export namespace ArrowDown {
2
+ let key: string;
3
+ let which: number;
4
+ let keyCode: number;
5
+ let code: string;
6
+ }
7
+ export namespace ArrowLeft {
8
+ let key_1: string;
9
+ export { key_1 as key };
10
+ let which_1: number;
11
+ export { which_1 as which };
12
+ let keyCode_1: number;
13
+ export { keyCode_1 as keyCode };
14
+ let code_1: string;
15
+ export { code_1 as code };
16
+ }
17
+ export namespace ArrowRight {
18
+ let key_2: string;
19
+ export { key_2 as key };
20
+ let which_2: number;
21
+ export { which_2 as which };
22
+ let keyCode_2: number;
23
+ export { keyCode_2 as keyCode };
24
+ let code_2: string;
25
+ export { code_2 as code };
26
+ }
27
+ export namespace ArrowUp {
28
+ let key_3: string;
29
+ export { key_3 as key };
30
+ let which_3: number;
31
+ export { which_3 as which };
32
+ let keyCode_3: number;
33
+ export { keyCode_3 as keyCode };
34
+ let code_3: string;
35
+ export { code_3 as code };
36
+ }
37
+ export namespace End {
38
+ let key_4: string;
39
+ export { key_4 as key };
40
+ let which_4: number;
41
+ export { which_4 as which };
42
+ let keyCode_4: number;
43
+ export { keyCode_4 as keyCode };
44
+ let code_4: string;
45
+ export { code_4 as code };
46
+ }
47
+ export namespace Enter {
48
+ let key_5: string;
49
+ export { key_5 as key };
50
+ let which_5: number;
51
+ export { which_5 as which };
52
+ let keyCode_5: number;
53
+ export { keyCode_5 as keyCode };
54
+ let code_5: string;
55
+ export { code_5 as code };
56
+ }
57
+ export namespace Escape {
58
+ let key_6: string[];
59
+ export { key_6 as key };
60
+ let which_6: number;
61
+ export { which_6 as which };
62
+ let keyCode_6: number;
63
+ export { keyCode_6 as keyCode };
64
+ let code_6: string;
65
+ export { code_6 as code };
66
+ }
67
+ export namespace Home {
68
+ let key_7: string;
69
+ export { key_7 as key };
70
+ let which_7: number;
71
+ export { which_7 as which };
72
+ let keyCode_7: number;
73
+ export { keyCode_7 as keyCode };
74
+ let code_7: string;
75
+ export { code_7 as code };
76
+ }
77
+ export namespace Space {
78
+ let key_8: string;
79
+ export { key_8 as key };
80
+ let which_8: number;
81
+ export { which_8 as which };
82
+ let keyCode_8: number;
83
+ export { keyCode_8 as keyCode };
84
+ let code_8: string;
85
+ export { code_8 as code };
86
+ }
87
+ export namespace Tab {
88
+ let key_9: string;
89
+ export { key_9 as key };
90
+ let which_9: number;
91
+ export { which_9 as which };
92
+ let keyCode_9: number;
93
+ export { keyCode_9 as keyCode };
94
+ let code_9: string;
95
+ export { code_9 as code };
96
+ }
@@ -0,0 +1,61 @@
1
+ export type Key = {
2
+ key: Array<string> | string;
3
+ which: number;
4
+ keyCode: number;
5
+ };
6
+ /**
7
+ * Check to see if the given key matches the corresponding keyboard event. Also
8
+ * supports passing in the value directly if you can't used the given event.
9
+ *
10
+ * @example
11
+ * import * as keys from '../keys';
12
+ * import { matches } from '../match';
13
+ *
14
+ * function handleOnKeyDown(event) {
15
+ * if (match(event, keys.Enter) {
16
+ * // ...
17
+ * }
18
+ * }
19
+ *
20
+ * @param {React.SyntheticEvent|Event|number|string} eventOrCode
21
+ * @param {Key} key
22
+ * @returns {boolean}
23
+ */
24
+ export function match(eventOrCode: React.SyntheticEvent | Event | number | string, { key, which, keyCode, code }?: Key): boolean;
25
+ /**
26
+ * Copyright IBM Corp. 2024
27
+ *
28
+ * This source code is licensed under the Apache-2.0 license found in the
29
+ * LICENSE file in the root directory of this source tree.
30
+ */
31
+ /**
32
+ * Copyright IBM Corp. 2016, 2023
33
+ *
34
+ * This source code is licensed under the Apache-2.0 license found in the
35
+ * LICENSE file in the root directory of this source tree.
36
+ */
37
+ /**
38
+ * @typedef Key
39
+ * @property key {Array<string>|string}
40
+ * @property which {number}
41
+ * @property keyCode {number}
42
+ */
43
+ /**
44
+ * Check to see if at least one key code matches the key code of the
45
+ * given event.
46
+ *
47
+ * @example
48
+ * import * as keys from '../keys';
49
+ * import { matches } from '../match';
50
+ *
51
+ * function handleOnKeyDown(event) {
52
+ * if (matches(event, [keys.Enter, keys.Space]) {
53
+ * // ...
54
+ * }
55
+ * }
56
+ *
57
+ * @param {Event|React.SyntheticEvent} event
58
+ * @param {Array<Key>} keysToMatch
59
+ * @returns {boolean}
60
+ */
61
+ export function matches(event: Event | React.SyntheticEvent, keysToMatch: Array<Key>): boolean;
@@ -0,0 +1,12 @@
1
+ export { setupGetInstanceId as default };
2
+ /**
3
+ * Copyright IBM Corp. 2024
4
+ *
5
+ * This source code is licensed under the Apache-2.0 license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ /**
9
+ * Generic utility to initialize a method that will return a unique instance id
10
+ * for a component.
11
+ */
12
+ declare function setupGetInstanceId(): () => number;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * `useDelayedState` mirrors `useState` but also allows you to add a delay to
9
+ * when your state updates. You can provide a second argument to `setState`,
10
+ * `delayMs`, which will be the time in milliseconds after which the state is
11
+ * updated.
12
+ *
13
+ * This hook will clean up pending timers in `useEffect` and will cancel any
14
+ * pending timers when a `setState` is called before the state is updated from
15
+ * a previous call
16
+ */
17
+ export function useDelayedState(initialState: any): any[];
@@ -0,0 +1,17 @@
1
+ export type WindowEventCallback<E extends keyof WindowEventMap> = (event: WindowEventMap[E]) => void;
2
+ /**
3
+ * Copyright IBM Corp. 2016, 2023
4
+ *
5
+ * This source code is licensed under the Apache-2.0 license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ /**
9
+ * @template {keyof WindowEventMap} E
10
+ * @typedef {(event: WindowEventMap[E]) => void} WindowEventCallback
11
+ */
12
+ /**
13
+ * @template {keyof WindowEventMap} E
14
+ * @param {E} eventName
15
+ * @param {WindowEventCallback<E>} callback
16
+ */
17
+ export function useWindowEvent<E extends keyof WindowEventMap>(eventName: E, callback: WindowEventCallback<E>): void;
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
3
+ * This is an internal utility, not intended for public usage.
4
+ * @param {string} [prefix] the optional prefix id
5
+ * @returns {string}
6
+ */
7
+ export function useCompatibleId(prefix?: string): string;
8
+ /**
9
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
10
+ * This is an internal utility, not intended for public usage.
11
+ * @param {string} [prefix] the optional prefix id
12
+ * @returns {string}
13
+ */
14
+ export function useId(prefix?: string): string;
@@ -0,0 +1,6 @@
1
+ export const IdPrefixContext: React__default.Context<null>;
2
+ /**
3
+ *
4
+ */
5
+ export function useIdPrefix(): null;
6
+ import React__default from 'react';
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export function useMatchMedia(mediaQueryString: any): boolean;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * Combine multiple refs into a single ref. This use useful when you have two
9
+ * refs from both `React.forwardRef` and `useRef` that you would like to add to
10
+ * the same node.
11
+ */
12
+ export function useMergedRefs(refs: any): (node: any) => void;
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export const PrefixContext: React__default.Context<string>;
8
+ /**
9
+ * An internal function to return the prefix used in components and styles.
10
+ *
11
+ * @returns a react context including the prefix
12
+ */
13
+ export function usePrefix(): string;
14
+ import React__default from 'react';
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * Copyright IBM Corp. 2016, 2023
9
+ *
10
+ * This source code is licensed under the Apache-2.0 license found in the
11
+ * LICENSE file in the root directory of this source tree.
12
+ */
13
+ export function warning(condition: any, format: any, ...args: any[]): void;
@@ -0,0 +1 @@
1
+ export const AriaLabelPropType: [key: string];
@@ -0,0 +1,2 @@
1
+ export { deprecate as default };
2
+ declare function deprecate(propType: any, message: any): (props: any, propName: any, componentName: any, ...rest: any[]) => any;
@@ -0,0 +1,20 @@
1
+ export { isRequiredOneOf as default };
2
+ /**
3
+ * Copyright IBM Corp. 2024
4
+ *
5
+ * This source code is licensed under the Apache-2.0 license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ /**
9
+ * Copyright IBM Corp. 2016, 2023
10
+ *
11
+ * This source code is licensed under the Apache-2.0 license found in the
12
+ * LICENSE file in the root directory of this source tree.
13
+ */
14
+ /**
15
+ * @param {[key: string]: Function)} propTypes The list of type checkers, keyed by prop names.
16
+ * @returns {[key: string]: Function}
17
+ * The new prop type checkers that checks if one of the given props exist,
18
+ * in addition to the original type checkings.
19
+ */
20
+ declare function isRequiredOneOf(propTypes: any): [key: string];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carbon-labs/react-ui-shell",
3
- "version": "0.85.0",
3
+ "version": "0.86.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "provenance": true
@@ -42,5 +42,5 @@
42
42
  "dependencies": {
43
43
  "@ibm/telemetry-js": "^1.10.2"
44
44
  },
45
- "gitHead": "e07b9ac0be185323c42826941d40632329004ee3"
45
+ "gitHead": "3624115c249ad05d1717bfdbba6a64ad5ccae2d8"
46
46
  }
@@ -5,10 +5,10 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/utilities/convert' as convert;
9
- @use '@carbon/styles/scss/motion' as *;
10
- @use '@carbon/styles/scss/spacing' as *;
11
- @use '@carbon/styles/scss/breakpoint' as *;
8
+ @use '@carbon/react/scss/utilities/convert' as convert;
9
+ @use '@carbon/react/scss/motion' as *;
10
+ @use '@carbon/react/scss/spacing' as *;
11
+ @use '@carbon/react/scss/breakpoint' as *;
12
12
 
13
13
  $prefix: 'cds' !default;
14
14
 
@@ -4,8 +4,8 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- @use '@carbon/styles/scss/utilities/convert' as convert;
8
- @use '@carbon/styles/scss/theme' as *;
7
+ @use '@carbon/react/scss/utilities/convert' as convert;
8
+ @use '@carbon/react/scss/theme' as *;
9
9
 
10
10
  $prefix: 'cds' !default;
11
11
 
@@ -5,11 +5,11 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/spacing' as *;
9
- @use '@carbon/styles/scss/theme' as *;
8
+ @use '@carbon/react/scss/spacing' as *;
9
+ @use '@carbon/react/scss/theme' as *;
10
10
  @use '@carbon/react/scss/utilities/convert' as convert;
11
- @use '@carbon/styles/scss/breakpoint' as *;
12
- @use '@carbon/styles/scss/type' as *;
11
+ @use '@carbon/react/scss/breakpoint' as *;
12
+ @use '@carbon/react/scss/type' as *;
13
13
 
14
14
  $prefix: 'cds' !default;
15
15
 
@@ -5,12 +5,12 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/spacing' as *;
9
- @use '@carbon/styles/scss/theme' as *;
10
- @use '@carbon/styles/scss/motion' as *;
8
+ @use '@carbon/react/scss/spacing' as *;
9
+ @use '@carbon/react/scss/theme' as *;
10
+ @use '@carbon/react/scss/motion' as *;
11
11
  @use '@carbon/react/scss/utilities/convert' as convert;
12
- @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
13
- @use '@carbon/styles/scss/breakpoint' as *;
12
+ @use '@carbon/react/scss/utilities/custom-property' as custom-property;
13
+ @use '@carbon/react/scss/breakpoint' as *;
14
14
 
15
15
  $prefix: 'cds' !default;
16
16
 
@@ -51,6 +51,12 @@ $prefix: 'cds' !default;
51
51
  background-color: $layer;
52
52
  }
53
53
 
54
+ .#{$prefix}--popover--border.#{$prefix}--header-action
55
+ .#{$prefix}--tooltip
56
+ .#{$prefix}--tooltip-content {
57
+ outline: none;
58
+ }
59
+
54
60
  .#{$prefix}--header-action .#{$prefix}--toggletip-content {
55
61
  @include custom-property.declaration('button-focus-color', $focus);
56
62
  @include custom-property.declaration('link-text-color', $link-primary);
@@ -5,27 +5,20 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/spacing' as *;
9
- @use '@carbon/styles/scss/type' as *;
10
- @use '@carbon/styles/scss/theme' as *;
8
+ @use '@carbon/react/scss/spacing' as *;
9
+ @use '@carbon/react/scss/type' as *;
10
+ @use '@carbon/react/scss/theme' as *;
11
11
  @use '@carbon/react/scss/utilities/convert' as convert;
12
- @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
12
+ @use '@carbon/react/scss/utilities/custom-property' as custom-property;
13
13
  @use '@carbon/ibm-products/scss/components/UserAvatar';
14
14
 
15
15
  $prefix: 'cds' !default;
16
16
 
17
17
  // profile
18
18
 
19
- .#{$prefix}--profile.#{$prefix}--popover--open {
20
- background-color: $background;
21
- }
22
-
23
19
  .#{$prefix}--header-overflow-panel .#{$prefix}--toggletip-content,
24
20
  .#{$prefix}--profile .#{$prefix}--toggletip-content {
25
21
  padding: 0;
26
- background-color: $background;
27
- border-block-end: 1px solid $border-subtle;
28
- border-inline-start: 1px solid $border-subtle;
29
22
  gap: 0;
30
23
  inline-size: convert.to-rem(256px);
31
24
  max-block-size: 100vh;
@@ -82,8 +75,3 @@ $prefix: 'cds' !default;
82
75
  .#{$prefix}--header-action__content .#{$prefix}--contained-list--on-page {
83
76
  padding: 0;
84
77
  }
85
-
86
- // TODO: remove when https://github.com/carbon-design-system/carbon/pull/19813 is released
87
- .#{$prefix}--header-action__content .#{$prefix}--contained-list__header {
88
- display: none;
89
- }
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/theme' as *;
8
+ @use '@carbon/react/scss/theme' as *;
9
9
 
10
10
  $prefix: 'cds' !default;
11
11
 
@@ -5,18 +5,18 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/utilities/convert' as convert;
9
- @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
10
- @use '@carbon/styles/scss/utilities/button-reset' as button-reset;
11
- @use '@carbon/styles/scss/utilities/focus-outline' as *;
12
- @use '@carbon/styles/scss/breakpoint' as *;
13
- @use '@carbon/styles/scss/theme' as *;
14
- @use '@carbon/styles/scss/motion' as *;
15
- @use '@carbon/styles/scss/type' as *;
16
- @use '@carbon/styles/scss/utilities/z-index' as *;
8
+ @use '@carbon/react/scss/utilities/convert' as convert;
9
+ @use '@carbon/react/scss/utilities/custom-property' as custom-property;
10
+ @use '@carbon/react/scss/utilities/button-reset' as button-reset;
11
+ @use '@carbon/react/scss/utilities/focus-outline' as *;
12
+ @use '@carbon/react/scss/breakpoint' as *;
13
+ @use '@carbon/react/scss/theme' as *;
14
+ @use '@carbon/react/scss/motion' as *;
15
+ @use '@carbon/react/scss/type' as *;
16
+ @use '@carbon/react/scss/utilities/z-index' as *;
17
17
  @use '@carbon/styles/scss/components/ui-shell/mixins' as *;
18
18
  @use '@carbon/styles/scss/components/ui-shell/functions' as *;
19
- @use '@carbon/styles/scss/spacing' as *;
19
+ @use '@carbon/react/scss/spacing' as *;
20
20
 
21
21
  $prefix: 'cds' !default;
22
22
 
@@ -5,15 +5,15 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- @use '@carbon/styles/scss/theme' as *;
9
- @use '@carbon/styles/scss/type' as *;
10
- @use '@carbon/styles/scss/colors' as *;
11
- @use '@carbon/styles/scss/spacing' as *;
8
+ @use '@carbon/react/scss/theme' as *;
9
+ @use '@carbon/react/scss/type' as *;
10
+ @use '@carbon/react/scss/colors' as *;
11
+ @use '@carbon/react/scss/spacing' as *;
12
12
 
13
13
  $prefix: 'cds' !default;
14
14
 
15
15
  :root {
16
- // these should be set up as component tokens if/when moved to @carbon/styles
16
+ // these should be set up as component tokens if/when moved to @carbon/react
17
17
  --trial-countdown-start: #{$blue-60};
18
18
  --trial-countdown-end: #{$purple-50};
19
19
  }