@elliemae/ds-breadcrumb 3.0.0-next.2 → 3.0.0-next.6

package/cjs/styles.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const handleColor = (theme, isActive, color, isTitle) => {
-  if (isActive) return theme.colors.neutral[800];else if (color) return color;else if (isTitle) return theme.colors.neutral[700];else return theme.colors.brand[600];
-};
-
-const StyledList = /*#__PURE__*/styled__default["default"].ol.withConfig({
-  componentId: "sc-12gvmg4-0"
-})(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
-const StyledCrumbWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
-  componentId: "sc-12gvmg4-1"
-})(["display:inline-flex;align-items:center;flex-shrink:20;transition:flex-shrink 0.1s cubic-bezier(0.64,0,0.35,1);height:16px;min-width:10px;&:hover{flex-shrink:0;}", ""], _ref => {
-  let {
-    theme,
-    isTitle,
-    trailingSlash
-  } = _ref;
-  return isTitle || !trailingSlash ? "&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ") : "&:after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ");
-});
-const StyledContainer = /*#__PURE__*/styled__default["default"].nav.withConfig({
-  componentId: "sc-12gvmg4-2"
-})(["display:flex;align-items:center;padding:0;"]);
-const StyledLink = /*#__PURE__*/styled__default["default"].a.withConfig({
-  componentId: "sc-12gvmg4-3"
-})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-size:12px;outline:none;margin:0 2px;border:2px solid transparent;-webkit-text-stroke:0.4px transparent;font-weight:", ";color:", ";&:hover{color:", ";cursor:pointer;", ";}&:focus{", " border-radius:2px;}"], _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.fontWeights.regular;
-}, _ref3 => {
-  let {
-    theme,
-    isActive,
-    color,
-    isTitle
-  } = _ref3;
-  return handleColor(theme, isActive, color, isTitle);
-}, _ref4 => {
-  let {
-    theme,
-    color
-  } = _ref4;
-  return color ? color : theme.colors.brand[800];
-}, _ref5 => {
-  let {
-    theme,
-    color
-  } = _ref5;
-  return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return "border: 2px solid ".concat(theme.colors.brand[700], ";");
-});
-
-exports.StyledContainer = StyledContainer;
-exports.StyledCrumbWrapper = StyledCrumbWrapper;
-exports.StyledLink = StyledLink;
-exports.StyledList = StyledList;

package/esm/DSBreadcrumb.js

@@ -1,88 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import React, { useMemo, cloneElement } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { DSBreadcrumbItem } from './DSBreadcrumbItem.js';
-import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
-import { StyledContainer, StyledList } from './styles.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["containerProps", "as", "label", "isTitle", "children", "trailingSlash"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const htmlElements = ['nav', 'div', 'header', 'footer', 'main'];
-
-const DSBreadcrumb = _ref => {
-  let {
-    containerProps = {},
-    as = 'nav',
-    label = 'Breadcrumb',
-    isTitle = false,
-    children,
-    trailingSlash = true
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const [addRef, onKeyDown] = useKeyboardNavigation();
-  const safeElement = useMemo(() => htmlElements.indexOf(as) > -1 ? as : 'nav', [as]);
-  return /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
-    "aria-label": label,
-    "data-testid": "breadcrumb-nav-container"
-  }, rest), containerProps), {}, {
-    as: safeElement,
-    children: /*#__PURE__*/_jsx(StyledList, {
-      "data-testid": "list-container"
-    }, void 0, React.Children.map(children, (child, childIndex) => childIndex < children.length - 1 ? /*#__PURE__*/cloneElement(child, {
-      childIndex,
-      addRef,
-      onKeyDown
-    }) : /*#__PURE__*/cloneElement(child, {
-      childIndex,
-      addRef,
-      onKeyDown,
-      trailingSlash,
-      isTitle
-    })))
-  }));
-};
-
-DSBreadcrumb.Item = DSBreadcrumbItem;
-const props = {
-  /** props injected to breadcrumb wrapper */
-  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),
-
-  /**
-   * Type of element you want the main container to be:
-   * 'nav', 'div', 'header', 'footer', 'main'
-   */
-  as: PropTypes.string.description("Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'"),
-
-  /**
-   * Whether to show the last element of the breadcrumb as a title
-   * Also removes trailing slash to show last element as title
-   */
-  isTitle: PropTypes.bool.description('Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title'),
-
-  /** breadcrumb label */
-  label: PropTypes.string.description('breadcrumb label'),
-
-  /**
-   * Container items to wrap
-   */
-  children: PropTypes.arrayOf(DSBreadcrumbItem).isRequired.description('Container items to wrap')
-};
-const DSBreadcrumbWithSchema = describe(DSBreadcrumb);
-DSBreadcrumbWithSchema.propTypes = props;
-
-export { DSBreadcrumb, DSBreadcrumbWithSchema, DSBreadcrumb as default, htmlElements };

package/esm/DSBreadcrumbItem.js

@@ -1,87 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import { StyledCrumbWrapper, StyledLink } from './styles.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["active", "as", "href", "isTitle", "onClick", "label", "color", "addRef", "childIndex", "trailingSlash", "onKeyDown"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function DSBreadcrumbItem(_ref) {
-  let {
-    active = false,
-    as = 'a',
-    href = undefined,
-    isTitle,
-    onClick = () => null,
-    label = '',
-    color = null,
-    addRef,
-    childIndex,
-    trailingSlash,
-    onKeyDown = () => null
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/jsx(StyledCrumbWrapper, _objectSpread(_objectSpread({
-    "aria-current": active ? 'page' : undefined,
-    "data-testid": "breadcrumb-item-container",
-    isTitle: isTitle,
-    trailingSlash: trailingSlash
-  }, rest), {}, {
-    children: /*#__PURE__*/jsx(StyledLink, {
-      as: as,
-      href: href,
-      onClick: onClick,
-      ref: addRef,
-      tabIndex: 0,
-      isActive: active,
-      onKeyDown: e => onKeyDown(e, childIndex, onClick),
-      isTitle: isTitle,
-      color: color,
-      children: label
-    })
-  }));
-}
-
-const props = {
-  /** inject props to wrapper */
-  containerComponent: PropTypes.string.description('inject props to wrapper'),
-
-  /** render as any html node */
-  as: PropTypes.string.description('render as any html node'),
-
-  /** active item */
-  active: PropTypes.bool.description('active item'),
-
-  /** href link */
-  href: PropTypes.string.description('href link'),
-
-  /** on click handler */
-  onClick: PropTypes.func.description('on click handler'),
-
-  /** style item as title */
-  isTitle: PropTypes.bool.description('style item as title'),
-
-  /** add trailing slash */
-  trailingSlash: PropTypes.bool.description('add trailing slash'),
-
-  /** item label */
-  label: PropTypes.string.description('item label'),
-
-  /** link color */
-  color: PropTypes.string.description('link color')
-};
-const DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);
-DSBreadcrumbItemWithSchema.propTypes = props;
-
-export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema, DSBreadcrumbItem as default };

package/esm/index.d.js

@@ -1 +0,0 @@
-

package/esm/index.js

@@ -1,2 +0,0 @@
-export { DSBreadcrumb, DSBreadcrumbWithSchema, DSBreadcrumb as default, htmlElements } from './DSBreadcrumb.js';
-export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema } from './DSBreadcrumbItem.js';

package/esm/styles.js

@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-
-const handleColor = (theme, isActive, color, isTitle) => {
-  if (isActive) return theme.colors.neutral[800];else if (color) return color;else if (isTitle) return theme.colors.neutral[700];else return theme.colors.brand[600];
-};
-
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  componentId: "sc-12gvmg4-0"
-})(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
-const StyledCrumbWrapper = /*#__PURE__*/styled.li.withConfig({
-  componentId: "sc-12gvmg4-1"
-})(["display:inline-flex;align-items:center;flex-shrink:20;transition:flex-shrink 0.1s cubic-bezier(0.64,0,0.35,1);height:16px;min-width:10px;&:hover{flex-shrink:0;}", ""], _ref => {
-  let {
-    theme,
-    isTitle,
-    trailingSlash
-  } = _ref;
-  return isTitle || !trailingSlash ? "&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ") : "&:after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ");
-});
-const StyledContainer = /*#__PURE__*/styled.nav.withConfig({
-  componentId: "sc-12gvmg4-2"
-})(["display:flex;align-items:center;padding:0;"]);
-const StyledLink = /*#__PURE__*/styled.a.withConfig({
-  componentId: "sc-12gvmg4-3"
-})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-size:12px;outline:none;margin:0 2px;border:2px solid transparent;-webkit-text-stroke:0.4px transparent;font-weight:", ";color:", ";&:hover{color:", ";cursor:pointer;", ";}&:focus{", " border-radius:2px;}"], _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.fontWeights.regular;
-}, _ref3 => {
-  let {
-    theme,
-    isActive,
-    color,
-    isTitle
-  } = _ref3;
-  return handleColor(theme, isActive, color, isTitle);
-}, _ref4 => {
-  let {
-    theme,
-    color
-  } = _ref4;
-  return color ? color : theme.colors.brand[800];
-}, _ref5 => {
-  let {
-    theme,
-    color
-  } = _ref5;
-  return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return "border: 2px solid ".concat(theme.colors.brand[700], ";");
-});
-
-export { StyledContainer, StyledCrumbWrapper, StyledLink, StyledList };

package/types/DSBreadcrumb.d.ts

@@ -1,56 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-import React from 'react';
-import DSBreadcrumbItem from './DSBreadcrumbItem';
-import type { DSBreadcrumbPropsT } from './index.d';
-declare const htmlElements: readonly ["nav", "div", "header", "footer", "main"];
-declare const DSBreadcrumb: {
-    ({ containerProps, as, label, isTitle, children, trailingSlash, ...rest }: DSBreadcrumbPropsT): React.ReactElement;
-    Item: typeof DSBreadcrumbItem;
-    propTypes: {
-        /** props injected to breadcrumb wrapper */
-        containerProps: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /**
-         * Type of element you want the main container to be:
-         * 'nav', 'div', 'header', 'footer', 'main'
-         */
-        as: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /**
-         * Whether to show the last element of the breadcrumb as a title
-         * Also removes trailing slash to show last element as title
-         */
-        isTitle: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** breadcrumb label */
-        label: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /**
-         * Container items to wrap
-         */
-        children: any;
-    };
-};
-declare const DSBreadcrumbWithSchema: {
-    (props?: DSBreadcrumbPropsT | undefined): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };
-export default DSBreadcrumb;

package/types/DSBreadcrumbItem.d.ts

@@ -1,78 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-import React from 'react';
-import type { DSBreadcrumbItemPropsT } from './index.d';
-declare function DSBreadcrumbItem({ active, as, href, isTitle, onClick, label, color, addRef, childIndex, trailingSlash, onKeyDown, ...rest }: DSBreadcrumbItemPropsT): React.ReactElement;
-declare namespace DSBreadcrumbItem {
-    var propTypes: {
-        /** inject props to wrapper */
-        containerComponent: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** render as any html node */
-        as: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** active item */
-        active: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** href link */
-        href: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** on click handler */
-        onClick: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** style item as title */
-        isTitle: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** add trailing slash */
-        trailingSlash: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** item label */
-        label: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** link color */
-        color: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-    };
-}
-declare const DSBreadcrumbItemWithSchema: {
-    (props?: DSBreadcrumbItemPropsT | undefined): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };
-export default DSBreadcrumbItem;

package/types/hooks/useKeyboardNavigation.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useKeyboardNavigation: () => (((ref: HTMLAnchorElement) => void) | ((e: React.KeyboardEvent, componentRefIndex: any, callback: any) => void))[];

package/types/index.d.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { htmlElements } from './DSBreadcrumb';
-declare type SafeComponentsT = typeof htmlElements[number];
-declare type SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';
-interface DSBreadcrumbPropsT {
-    containerProps?: unknown;
-    as?: SafeComponentsT;
-    label?: string;
-    isTitle?: boolean;
-    trailingSlash?: boolean;
-    children: React.ReactElement[];
-}
-interface DSBreadcrumbItemPropsT {
-    active?: boolean;
-    isActive?: boolean;
-    as?: SafeItemComponentT;
-    href?: string;
-    isTitle?: boolean;
-    trailingSlash?: boolean;
-    addRef: (ref: HTMLElement) => void;
-    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;
-    onClick?: () => void;
-    label?: string;
-    childIndex: number;
-    color?: string | null;
-}
-export { DSBreadcrumbPropsT, DSBreadcrumbItemPropsT, SafeComponentsT, SafeItemComponentT, };

package/types/index.d.ts

@@ -1,3 +0,0 @@
-export * from './DSBreadcrumb';
-export * from './DSBreadcrumbItem';
-export { default } from './DSBreadcrumb';

package/types/styles.d.ts

@@ -1,6 +0,0 @@
-import type { DSBreadcrumbItemPropsT } from './index.d';
-declare const StyledList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-declare const StyledCrumbWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Partial<DSBreadcrumbItemPropsT>, never>;
-declare const StyledContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
-declare const StyledLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Partial<DSBreadcrumbItemPropsT>, never>;
-export { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };

package/types/tests/DSBreadcrumb.test.d.ts

@@ -1 +0,0 @@
-export {};

package/types/tests/DSBreadcrumbItem.test.d.ts

@@ -1 +0,0 @@
-export {};