@cloudscape-design/components 3.0.0

package/top-navigation/1.0-beta/internal.js

@@ -0,0 +1,101 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../../internal/base-component';
+import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
+import VisualContext from '../../internal/components/visual-context';
+import Portal from '../../internal/components/portal';
+import useFocusVisible from '../../internal/hooks/focus-visible';
+import { useTopNavigation } from './use-top-navigation.js';
+import Utility from './parts/utility';
+import OverflowMenu from './parts/overflow-menu';
+import styles from './styles.css.js';
+import { checkSafeUrl } from '../../internal/utils/check-safe-url';
+export default function InternalTopNavigation(_a) {
+    var __internalRootRef = _a.__internalRootRef, identity = _a.identity, i18nStrings = _a.i18nStrings, _b = _a.utilities, utilities = _b === void 0 ? [] : _b, search = _a.search, restProps = __rest(_a, ["__internalRootRef", "identity", "i18nStrings", "utilities", "search"]);
+    checkSafeUrl('TopNavigation', identity.href);
+    var baseProps = getBaseProps(restProps);
+    var _c = useTopNavigation({
+        __internalRootRef: __internalRootRef,
+        identity: identity,
+        search: search,
+        utilities: utilities
+    }), ref = _c.ref, virtualRef = _c.virtualRef, breakpoint = _c.breakpoint, responsiveState = _c.responsiveState, isSearchExpanded = _c.isSearchExpanded, onSearchUtilityClick = _c.onSearchUtilityClick;
+    var isNarrowViewport = breakpoint === 'default';
+    var isMediumViewport = breakpoint === 'xxs';
+    var onIdentityClick = function (event) {
+        if (isPlainLeftClick(event)) {
+            fireCancelableEvent(identity.onFollow, {}, event);
+        }
+    };
+    var focusVisible = useFocusVisible();
+    // Render the top nav twice; once as the top nav that users can see, and another
+    // "virtual" top nav used just for calculations. The virtual top nav doesn't react to
+    // layout changes and renders two sets of utilities: one with labels and one without.
+    var content = function (isVirtual) {
+        var _a, _b;
+        var _c, _d, _e, _f;
+        var Wrapper = isVirtual ? 'div' : 'header';
+        var showIdentity = isVirtual || !isSearchExpanded;
+        var showTitle = isVirtual || !responsiveState.hideTitle;
+        var showSearchSlot = search && (isVirtual || !responsiveState.hideSearch || isSearchExpanded);
+        var showSearchUtility = isVirtual || (search && responsiveState.hideSearch);
+        var showUtilities = isVirtual || !isSearchExpanded;
+        var showMenuTrigger = isVirtual || (!isSearchExpanded && responsiveState.hideUtilities);
+        return (React.createElement(Wrapper, { ref: isVirtual ? virtualRef : ref, "aria-hidden": isVirtual ? true : undefined, 
+            // False positive, "Wrapper" is either a "div" or a "header"
+            // eslint-disable-next-line react/forbid-component-props
+            className: clsx(styles['top-navigation'], (_a = {},
+                _a[styles.hidden] = isVirtual,
+                _a[styles.narrow] = isNarrowViewport,
+                _a[styles.medium] = isMediumViewport,
+                _a)) },
+            React.createElement("div", { className: styles['padding-box'] },
+                showIdentity && (React.createElement("div", { className: clsx(styles.identity, !identity.logo && styles['no-logo']) },
+                    React.createElement("a", __assign({}, focusVisible, { className: styles['identity-link'], href: identity.href, onClick: onIdentityClick }),
+                        identity.logo && (React.createElement("img", { role: "img", src: (_c = identity.logo) === null || _c === void 0 ? void 0 : _c.src, alt: (_d = identity.logo) === null || _d === void 0 ? void 0 : _d.alt, className: clsx(styles.logo, (_b = {},
+                                _b[styles.narrow] = isNarrowViewport,
+                                _b)) })),
+                        showTitle && React.createElement("span", { className: styles.title }, identity.title)))),
+                React.createElement("div", { className: styles.inputs }, showSearchSlot && (React.createElement("div", { className: clsx(styles.search, !isVirtual && isSearchExpanded && styles['search-expanded']) }, search))),
+                React.createElement("div", { className: styles.utilities },
+                    showSearchUtility && (React.createElement("div", { className: clsx(styles['utility-wrapper'], styles['utility-type-button'], styles['utility-type-button-link']), "data-utility-special": "search" },
+                        React.createElement(Utility, { hideText: true, isNarrowViewport: isNarrowViewport, definition: {
+                                type: 'button',
+                                iconName: isSearchExpanded ? 'close' : 'search',
+                                ariaLabel: isSearchExpanded
+                                    ? i18nStrings.searchDismissIconAriaLabel
+                                    : i18nStrings.searchIconAriaLabel,
+                                onClick: onSearchUtilityClick
+                            } }))),
+                    showUtilities &&
+                        utilities
+                            .filter(function (_utility, i) {
+                            return isVirtual || !responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) === -1;
+                        })
+                            .map(function (utility, i) {
+                            var _a;
+                            var hideText = !!responsiveState.hideUtilityText;
+                            var last = (isVirtual || !showMenuTrigger) && i === utilities.length - 1;
+                            return (React.createElement("div", { key: i, className: clsx(styles['utility-wrapper'], styles["utility-type-".concat(utility.type)], last && styles['utility-wrapper-last'], utility.type === 'button' && styles["utility-type-button-".concat((_a = utility.variant) !== null && _a !== void 0 ? _a : 'link')]), "data-utility-index": i, "data-utility-hide": "".concat(hideText) },
+                                React.createElement(Utility, { hideText: hideText, definition: utility, last: last, isNarrowViewport: isNarrowViewport })));
+                        }),
+                    isVirtual &&
+                        utilities.map(function (utility, i) {
+                            var _a;
+                            var hideText = !responsiveState.hideUtilityText;
+                            var last = !showMenuTrigger && i === utilities.length - 1;
+                            return (React.createElement("div", { key: i, className: clsx(styles['utility-wrapper'], styles["utility-type-".concat(utility.type)], last && styles['utility-wrapper-last'], utility.type === 'button' && styles["utility-type-button-".concat((_a = utility.variant) !== null && _a !== void 0 ? _a : 'link')]), "data-utility-index": i, "data-utility-hide": "".concat(hideText) },
+                                React.createElement(Utility, { hideText: hideText, definition: utility, last: last, isNarrowViewport: isNarrowViewport })));
+                        }),
+                    showMenuTrigger && (React.createElement("div", { className: clsx(styles['utility-wrapper'], styles['utility-type-menu-dropdown'], styles['utility-wrapper-last']), "data-utility-special": "menu-trigger" },
+                        React.createElement(OverflowMenu, { utilities: (_f = (_e = responsiveState.hideUtilities) === null || _e === void 0 ? void 0 : _e.map(function (i) { return utilities[i]; })) !== null && _f !== void 0 ? _f : [], isNarrowViewport: isNarrowViewport }, i18nStrings.overflowMenuTriggerText)))))));
+    };
+    return (React.createElement("div", __assign({}, baseProps, { ref: __internalRootRef }),
+        React.createElement(VisualContext, { contextName: "top-navigation" },
+            content(false),
+            React.createElement(Portal, null, content(true)))));
+}
+//# sourceMappingURL=internal.js.map

package/top-navigation/1.0-beta/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../src/top-navigation/1.0-beta/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalBaseComponentProps } from '../../internal/hooks/use-base-component';\nimport { getBaseProps } from '../../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport VisualContext from '../../internal/components/visual-context';\nimport Portal from '../../internal/components/portal';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\n\nimport { TopNavigationProps } from './interfaces';\nimport { useTopNavigation } from './use-top-navigation.js';\nimport Utility from './parts/utility';\nimport OverflowMenu from './parts/overflow-menu';\n\nimport styles from './styles.css.js';\nimport { checkSafeUrl } from '../../internal/utils/check-safe-url';\n\nexport type InternalTopNavigationProps = TopNavigationProps & InternalBaseComponentProps;\n\nexport default function InternalTopNavigation({\n  __internalRootRef,\n  identity,\n  i18nStrings,\n  utilities = [],\n  search,\n  ...restProps\n}: InternalTopNavigationProps) {\n  checkSafeUrl('TopNavigation', identity.href);\n  const baseProps = getBaseProps(restProps);\n  const { ref, virtualRef, breakpoint, responsiveState, isSearchExpanded, onSearchUtilityClick } = useTopNavigation({\n    __internalRootRef,\n    identity,\n    search,\n    utilities,\n  });\n\n  const isNarrowViewport = breakpoint === 'default';\n  const isMediumViewport = breakpoint === 'xxs';\n\n  const onIdentityClick = (event: React.MouseEvent) => {\n    if (isPlainLeftClick(event)) {\n      fireCancelableEvent(identity.onFollow, {}, event);\n    }\n  };\n  const focusVisible = useFocusVisible();\n\n  // Render the top nav twice; once as the top nav that users can see, and another\n  // \"virtual\" top nav used just for calculations. The virtual top nav doesn't react to\n  // layout changes and renders two sets of utilities: one with labels and one without.\n  const content = (isVirtual: boolean) => {\n    const Wrapper = isVirtual ? 'div' : 'header';\n    const showIdentity = isVirtual || !isSearchExpanded;\n    const showTitle = isVirtual || !responsiveState.hideTitle;\n    const showSearchSlot = search && (isVirtual || !responsiveState.hideSearch || isSearchExpanded);\n    const showSearchUtility = isVirtual || (search && responsiveState.hideSearch);\n    const showUtilities = isVirtual || !isSearchExpanded;\n    const showMenuTrigger = isVirtual || (!isSearchExpanded && responsiveState.hideUtilities);\n\n    return (\n      <Wrapper\n        ref={isVirtual ? virtualRef : ref}\n        aria-hidden={isVirtual ? true : undefined}\n        // False positive, \"Wrapper\" is either a \"div\" or a \"header\"\n        // eslint-disable-next-line react/forbid-component-props\n        className={clsx(styles['top-navigation'], {\n          [styles.hidden]: isVirtual,\n          [styles.narrow]: isNarrowViewport,\n          [styles.medium]: isMediumViewport,\n        })}\n      >\n        <div className={styles['padding-box']}>\n          {showIdentity && (\n            <div className={clsx(styles.identity, !identity.logo && styles['no-logo'])}>\n              <a {...focusVisible} className={styles['identity-link']} href={identity.href} onClick={onIdentityClick}>\n                {identity.logo && (\n                  <img\n                    role=\"img\"\n                    src={identity.logo?.src}\n                    alt={identity.logo?.alt}\n                    className={clsx(styles.logo, {\n                      [styles.narrow]: isNarrowViewport,\n                    })}\n                  />\n                )}\n                {showTitle && <span className={styles.title}>{identity.title}</span>}\n              </a>\n            </div>\n          )}\n\n          <div className={styles.inputs}>\n            {showSearchSlot && (\n              <div className={clsx(styles.search, !isVirtual && isSearchExpanded && styles['search-expanded'])}>\n                {search}\n              </div>\n            )}\n          </div>\n\n          <div className={styles.utilities}>\n            {showSearchUtility && (\n              <div\n                className={clsx(\n                  styles['utility-wrapper'],\n                  styles['utility-type-button'],\n                  styles['utility-type-button-link']\n                )}\n                data-utility-special=\"search\"\n              >\n                <Utility\n                  hideText={true}\n                  isNarrowViewport={isNarrowViewport}\n                  definition={{\n                    type: 'button',\n                    iconName: isSearchExpanded ? 'close' : 'search',\n                    ariaLabel: isSearchExpanded\n                      ? i18nStrings.searchDismissIconAriaLabel\n                      : i18nStrings.searchIconAriaLabel,\n                    onClick: onSearchUtilityClick,\n                  }}\n                />\n              </div>\n            )}\n\n            {showUtilities &&\n              utilities\n                .filter(\n                  (_utility, i) =>\n                    isVirtual || !responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) === -1\n                )\n                .map((utility, i) => {\n                  const hideText = !!responsiveState.hideUtilityText;\n                  const last = (isVirtual || !showMenuTrigger) && i === utilities.length - 1;\n                  return (\n                    <div\n                      key={i}\n                      className={clsx(\n                        styles['utility-wrapper'],\n                        styles[`utility-type-${utility.type}`],\n                        last && styles['utility-wrapper-last'],\n                        utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`]\n                      )}\n                      data-utility-index={i}\n                      data-utility-hide={`${hideText}`}\n                    >\n                      <Utility\n                        hideText={hideText}\n                        definition={utility}\n                        last={last}\n                        isNarrowViewport={isNarrowViewport}\n                      />\n                    </div>\n                  );\n                })}\n\n            {isVirtual &&\n              utilities.map((utility, i) => {\n                const hideText = !responsiveState.hideUtilityText;\n                const last = !showMenuTrigger && i === utilities.length - 1;\n                return (\n                  <div\n                    key={i}\n                    className={clsx(\n                      styles['utility-wrapper'],\n                      styles[`utility-type-${utility.type}`],\n                      last && styles['utility-wrapper-last'],\n                      utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`]\n                    )}\n                    data-utility-index={i}\n                    data-utility-hide={`${hideText}`}\n                  >\n                    <Utility hideText={hideText} definition={utility} last={last} isNarrowViewport={isNarrowViewport} />\n                  </div>\n                );\n              })}\n\n            {showMenuTrigger && (\n              <div\n                className={clsx(\n                  styles['utility-wrapper'],\n                  styles['utility-type-menu-dropdown'],\n                  styles['utility-wrapper-last']\n                )}\n                data-utility-special=\"menu-trigger\"\n              >\n                <OverflowMenu\n                  utilities={responsiveState.hideUtilities?.map(i => utilities[i]) ?? []}\n                  isNarrowViewport={isNarrowViewport}\n                >\n                  {i18nStrings.overflowMenuTriggerText}\n                </OverflowMenu>\n              </div>\n            )}\n          </div>\n        </div>\n      </Wrapper>\n    );\n  };\n\n  return (\n    <div {...baseProps} ref={__internalRootRef}>\n      <VisualContext contextName=\"top-navigation\">\n        {content(false)}\n        <Portal>{content(true)}</Portal>\n      </VisualContext>\n    </div>\n  );\n}\n"]}

package/top-navigation/1.0-beta/parts/overflow-menu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TopNavigationProps } from '../interfaces';
+import { BaseComponentProps } from '../../../internal/base-component';
+import { ButtonDropdownProps } from '../../../button-dropdown/interfaces';
+export interface OverflowMenuProps extends BaseComponentProps {
+    utilities: ReadonlyArray<TopNavigationProps.Utility>;
+    isNarrowViewport?: boolean;
+    /**
+     * Text displayed in the button dropdown trigger.
+     * @displayname text
+     */
+    children?: React.ReactNode;
+}
+export declare function transformUtility(utility: TopNavigationProps.Utility, index: number): ButtonDropdownProps.ItemOrGroup;
+export default function OverflowMenu({ children, utilities, isNarrowViewport }: OverflowMenuProps): JSX.Element;
+//# sourceMappingURL=overflow-menu.d.ts.map

package/top-navigation/1.0-beta/parts/overflow-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/1.0-beta/parts/overflow-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAI1E,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAErD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,mBAAmB,CAAC,WAAW,CA2BpH;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,iBAAiB,eA6BhG"}

package/top-navigation/1.0-beta/parts/overflow-menu.js

@@ -0,0 +1,55 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import MenuDropdown from '../../../internal/components/menu-dropdown';
+import { fireCancelableEvent } from '../../../internal/events';
+import styles from '../styles.css.js';
+function transformButtonDropdownItems(items, index) {
+    return items.map(function (item) {
+        var itemCopy = __assign(__assign({}, item), { id: "".concat(index, "__").concat(item.id || '') });
+        if ('items' in itemCopy) {
+            itemCopy.items = transformButtonDropdownItems(itemCopy.items, index);
+        }
+        return itemCopy;
+    });
+}
+export function transformUtility(utility, index) {
+    var title = utility.title || utility.text || '';
+    var commonProps = {
+        // Encode index into the ID, so we can pick out the right handler.
+        id: "".concat(index, "__"),
+        text: title,
+        iconName: utility.iconName,
+        iconUrl: utility.iconUrl,
+        iconAlt: utility.iconAlt,
+        iconSvg: utility.iconSvg
+    };
+    if (utility.type === 'menu-dropdown') {
+        return __assign(__assign({}, commonProps), { items: transformButtonDropdownItems(utility.items, index), description: utility.description });
+    }
+    else {
+        return __assign(__assign({}, commonProps), { href: utility.href, external: utility.external, externalIconAriaLabel: utility.externalIconAriaLabel });
+    }
+}
+export default function OverflowMenu(_a) {
+    var children = _a.children, utilities = _a.utilities, isNarrowViewport = _a.isNarrowViewport;
+    var onClick = function (isFollow, event) {
+        var _a = event.detail.id.split('__'), index = _a[0], rest = _a.slice(1);
+        var utility = utilities[parseInt(index)];
+        var defaultPrevented = false;
+        if ('onItemClick' in utility) {
+            defaultPrevented = fireCancelableEvent(utility.onItemClick, __assign(__assign({}, event.detail), { id: rest.join('__') }));
+        }
+        else if ('onClick' in utility && (isFollow || !utility.href)) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _b = event.detail, id = _b.id, baseNavigationalDetail = __rest(_b, ["id"]);
+            defaultPrevented = fireCancelableEvent(utility.onClick, baseNavigationalDetail);
+        }
+        if (defaultPrevented) {
+            event.preventDefault();
+        }
+    };
+    return (React.createElement(MenuDropdown, { items: utilities.map(transformUtility), offsetRight: isNarrowViewport ? 'l' : 'xxl', className: styles.trigger, expandableGroups: true, onItemClick: onClick.bind(null, false), onItemFollow: onClick.bind(null, true) }, children));
+}
+//# sourceMappingURL=overflow-menu.js.map

package/top-navigation/1.0-beta/parts/overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../../../../src/top-navigation/1.0-beta/parts/overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { TopNavigationProps } from '../interfaces';\nimport MenuDropdown from '../../../internal/components/menu-dropdown';\nimport { BaseComponentProps } from '../../../internal/base-component';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport { fireCancelableEvent } from '../../../internal/events';\nimport styles from '../styles.css.js';\n\nexport interface OverflowMenuProps extends BaseComponentProps {\n  utilities: ReadonlyArray<TopNavigationProps.Utility>;\n\n  isNarrowViewport?: boolean;\n\n  /**\n   * Text displayed in the button dropdown trigger.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n}\n\nfunction transformButtonDropdownItems(items: ButtonDropdownProps.Items, index: number): ButtonDropdownProps.Items {\n  return items.map(item => {\n    const itemCopy = { ...item, id: `${index}__${item.id || ''}` };\n    if ('items' in itemCopy) {\n      itemCopy.items = transformButtonDropdownItems(itemCopy.items, index);\n    }\n    return itemCopy;\n  });\n}\n\nexport function transformUtility(utility: TopNavigationProps.Utility, index: number): ButtonDropdownProps.ItemOrGroup {\n  const title = utility.title || utility.text || '';\n\n  const commonProps: Partial<ButtonDropdownProps.ItemOrGroup> = {\n    // Encode index into the ID, so we can pick out the right handler.\n    id: `${index}__`,\n    text: title,\n    iconName: utility.iconName,\n    iconUrl: utility.iconUrl,\n    iconAlt: utility.iconAlt,\n    iconSvg: utility.iconSvg,\n  };\n\n  if (utility.type === 'menu-dropdown') {\n    return {\n      ...commonProps,\n      items: transformButtonDropdownItems(utility.items, index),\n      description: utility.description,\n    } as ButtonDropdownProps.ItemGroup;\n  } else {\n    return {\n      ...commonProps,\n      href: utility.href,\n      external: utility.external,\n      externalIconAriaLabel: utility.externalIconAriaLabel,\n    } as ButtonDropdownProps.Item;\n  }\n}\n\nexport default function OverflowMenu({ children, utilities, isNarrowViewport }: OverflowMenuProps) {\n  const onClick = (isFollow: boolean, event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n    const [index, ...rest] = event.detail.id.split('__');\n    const utility = utilities[parseInt(index)];\n    let defaultPrevented = false;\n    if ('onItemClick' in utility) {\n      defaultPrevented = fireCancelableEvent(utility.onItemClick, { ...event.detail, id: rest.join('__') });\n    } else if ('onClick' in utility && (isFollow || !utility.href)) {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { id, ...baseNavigationalDetail } = event.detail;\n      defaultPrevented = fireCancelableEvent(utility.onClick, baseNavigationalDetail);\n    }\n    if (defaultPrevented) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <MenuDropdown\n      items={utilities.map(transformUtility)}\n      offsetRight={isNarrowViewport ? 'l' : 'xxl'}\n      className={styles.trigger}\n      expandableGroups={true}\n      onItemClick={onClick.bind(null, false)}\n      onItemFollow={onClick.bind(null, true)}\n    >\n      {children}\n    </MenuDropdown>\n  );\n}\n"]}

package/top-navigation/1.0-beta/parts/utility.d.ts

@@ -0,0 +1,9 @@
+import { TopNavigationProps } from '../interfaces';
+export interface UtilityProps {
+    hideText: boolean;
+    definition: TopNavigationProps.Utility;
+    last?: boolean;
+    isNarrowViewport?: boolean;
+}
+export default function Utility({ hideText, definition, last, isNarrowViewport }: UtilityProps): JSX.Element | null;
+//# sourceMappingURL=utility.d.ts.map

package/top-navigation/1.0-beta/parts/utility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/1.0-beta/parts/utility.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,YAAY,sBAuF7F"}

package/top-navigation/1.0-beta/parts/utility.js

@@ -0,0 +1,56 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { InternalButton } from '../../../button/internal';
+import InternalLink from '../../../link/internal';
+import InternalIcon from '../../../icon/internal';
+import MenuDropdown from '../../../internal/components/menu-dropdown';
+import styles from '../styles.css.js';
+import { checkSafeUrl } from '../../../internal/utils/check-safe-url';
+export default function Utility(_a) {
+    var _b;
+    var hideText = _a.hideText, definition = _a.definition, last = _a.last, isNarrowViewport = _a.isNarrowViewport;
+    var shouldHideText = hideText && !definition.disableTextCollapse && hasIcon(definition);
+    var ariaLabel = (_b = definition.ariaLabel) !== null && _b !== void 0 ? _b : definition.text;
+    if (definition.type === 'button') {
+        checkSafeUrl('TopNavigation', definition.href);
+        if (definition.variant === 'primary-button') {
+            return (React.createElement(InternalButton, { variant: "primary", href: definition.href, target: definition.external ? '_blank' : undefined, onClick: definition.onClick, ariaLabel: ariaLabel, iconName: definition.iconName, iconUrl: definition.iconUrl, iconAlt: definition.iconAlt, iconSvg: definition.iconSvg, className: clsx(last && styles['last-utility']) }, shouldHideText ? null : (React.createElement(React.Fragment, null,
+                definition.text,
+                definition.external && (React.createElement(React.Fragment, null,
+                    ' ',
+                    React.createElement("span", { className: styles['utility-button-external-icon'], "aria-label": definition.externalIconAriaLabel, role: definition.externalIconAriaLabel ? 'img' : undefined },
+                        React.createElement(InternalIcon, { name: "external" }))))))));
+        }
+        else {
+            // Link
+            return (React.createElement(InternalLink, { variant: "top-navigation", href: definition.href, external: definition.external, externalIconAriaLabel: definition.externalIconAriaLabel, onFollow: definition.onClick, ariaLabel: ariaLabel, className: clsx(last && styles['last-utility']) },
+                hasIcon(definition) && (React.createElement("span", { className: styles['utility-link-icon'] },
+                    React.createElement(InternalIcon, { name: definition.iconName, url: definition.iconUrl, alt: definition.iconAlt, svg: definition.iconSvg, badge: definition.badge }))),
+                !shouldHideText && definition.text));
+        }
+    }
+    else if (definition.type === 'menu-dropdown') {
+        var paddingRight = isNarrowViewport ? 'l' : 'xxl';
+        var title = definition.title || definition.text;
+        var shouldShowTitle = shouldHideText || !definition.text;
+        checkSafeUrlRecursively(definition.items);
+        return (React.createElement(MenuDropdown, __assign({}, definition, { title: shouldShowTitle ? title : '', ariaLabel: ariaLabel, className: styles['utility-dropdown'], offsetRight: last ? paddingRight : undefined }), !shouldHideText && definition.text));
+    }
+    return null;
+}
+function hasIcon(definition) {
+    return !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg;
+}
+function checkSafeUrlRecursively(itemOrGroup) {
+    for (var _i = 0, itemOrGroup_1 = itemOrGroup; _i < itemOrGroup_1.length; _i++) {
+        var item = itemOrGroup_1[_i];
+        checkSafeUrl('TopNavigation', item.href);
+        if ('items' in item) {
+            checkSafeUrlRecursively(item.items);
+        }
+    }
+}
+//# sourceMappingURL=utility.js.map

package/top-navigation/1.0-beta/parts/utility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility.js","sourceRoot":"","sources":["../../../../../src/top-navigation/1.0-beta/parts/utility.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../../button/internal';\nimport InternalLink from '../../../link/internal';\nimport InternalIcon from '../../../icon/internal';\nimport MenuDropdown, { MenuDropdownProps } from '../../../internal/components/menu-dropdown';\n\nimport { TopNavigationProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\n\nexport interface UtilityProps {\n  hideText: boolean;\n  definition: TopNavigationProps.Utility;\n  last?: boolean;\n  isNarrowViewport?: boolean;\n}\n\nexport default function Utility({ hideText, definition, last, isNarrowViewport }: UtilityProps) {\n  const shouldHideText = hideText && !definition.disableTextCollapse && hasIcon(definition);\n  const ariaLabel = definition.ariaLabel ?? definition.text;\n\n  if (definition.type === 'button') {\n    checkSafeUrl('TopNavigation', definition.href);\n    if (definition.variant === 'primary-button') {\n      return (\n        <InternalButton\n          variant=\"primary\"\n          href={definition.href}\n          target={definition.external ? '_blank' : undefined}\n          onClick={definition.onClick}\n          ariaLabel={ariaLabel}\n          iconName={definition.iconName}\n          iconUrl={definition.iconUrl}\n          iconAlt={definition.iconAlt}\n          iconSvg={definition.iconSvg}\n          className={clsx(last && styles['last-utility'])}\n        >\n          {shouldHideText ? null : (\n            <>\n              {definition.text}\n              {definition.external && (\n                <>\n                  {' '}\n                  <span\n                    className={styles['utility-button-external-icon']}\n                    aria-label={definition.externalIconAriaLabel}\n                    role={definition.externalIconAriaLabel ? 'img' : undefined}\n                  >\n                    <InternalIcon name=\"external\" />\n                  </span>\n                </>\n              )}\n            </>\n          )}\n        </InternalButton>\n      );\n    } else {\n      // Link\n      return (\n        <InternalLink\n          variant=\"top-navigation\"\n          href={definition.href}\n          external={definition.external}\n          externalIconAriaLabel={definition.externalIconAriaLabel}\n          onFollow={definition.onClick}\n          ariaLabel={ariaLabel}\n          className={clsx(last && styles['last-utility'])}\n        >\n          {hasIcon(definition) && (\n            <span className={styles['utility-link-icon']}>\n              <InternalIcon\n                name={definition.iconName}\n                url={definition.iconUrl}\n                alt={definition.iconAlt}\n                svg={definition.iconSvg}\n                badge={definition.badge}\n              />\n            </span>\n          )}\n          {!shouldHideText && definition.text}\n        </InternalLink>\n      );\n    }\n  } else if (definition.type === 'menu-dropdown') {\n    const paddingRight = isNarrowViewport ? 'l' : 'xxl';\n    const title = definition.title || definition.text;\n    const shouldShowTitle = shouldHideText || !definition.text;\n\n    checkSafeUrlRecursively(definition.items);\n\n    return (\n      <MenuDropdown\n        {...definition}\n        title={shouldShowTitle ? title : ''}\n        ariaLabel={ariaLabel}\n        className={styles['utility-dropdown']}\n        offsetRight={last ? paddingRight : undefined}\n      >\n        {!shouldHideText && definition.text}\n      </MenuDropdown>\n    );\n  }\n\n  return null;\n}\n\nfunction hasIcon(definition: TopNavigationProps.Utility): boolean {\n  return !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg;\n}\n\nfunction checkSafeUrlRecursively(itemOrGroup: MenuDropdownProps['items']) {\n  for (const item of itemOrGroup) {\n    checkSafeUrl('TopNavigation', item.href);\n\n    if ('items' in item) {\n      checkSafeUrlRecursively(item.items);\n    }\n  }\n}\n"]}

package/top-navigation/1.0-beta/styles.css.js

@@ -0,0 +1,30 @@
+
+    import './styles.scoped.css';
+    export default {
+  "top-navigation": "awsui_top-navigation_1ca1i_u0ab0_93",
+  "padding-box": "awsui_padding-box_1ca1i_u0ab0_104",
+  "medium": "awsui_medium_1ca1i_u0ab0_114",
+  "narrow": "awsui_narrow_1ca1i_u0ab0_114",
+  "hidden": "awsui_hidden_1ca1i_u0ab0_122",
+  "\t": "awsui_\t_1ca1i_u0ab0_1",
+  "identity": "awsui_identity_1ca1i_u0ab0_135",
+  "identity-link": "awsui_identity-link_1ca1i_u0ab0_135",
+  "no-logo": "awsui_no-logo_1ca1i_u0ab0_152",
+  "logo": "awsui_logo_1ca1i_u0ab0_156",
+  "title": "awsui_title_1ca1i_u0ab0_167",
+  "inputs": "awsui_inputs_1ca1i_u0ab0_181",
+  "search": "awsui_search_1ca1i_u0ab0_188",
+  "search-expanded": "awsui_search-expanded_1ca1i_u0ab0_193",
+  "utilities": "awsui_utilities_1ca1i_u0ab0_198",
+  "utility-wrapper": "awsui_utility-wrapper_1ca1i_u0ab0_210",
+  "utility-wrapper-last": "awsui_utility-wrapper-last_1ca1i_u0ab0_226",
+  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_1ca1i_u0ab0_226",
+  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_1ca1i_u0ab0_240",
+  "utility-type-button-link": "awsui_utility-type-button-link_1ca1i_u0ab0_255",
+  "utility-link-icon": "awsui_utility-link-icon_1ca1i_u0ab0_268",
+  "utility-button-external-icon": "awsui_utility-button-external-icon_1ca1i_u0ab0_272",
+  "trigger": "awsui_trigger_1ca1i_u0ab0_276",
+  "rotate-up": "awsui_rotate-up_1ca1i_u0ab0_280",
+  "rotate-down": "awsui_rotate-down_1ca1i_u0ab0_295"
+};
+