@clayui/breadcrumb 3.49.0 → 3.56.0

package/README.md

@@ -0,0 +1,19 @@
+# `@clayui/breadcrumb`
+
+Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.
+
+-   [Documentation](https://clayui.com/docs/components/breadcrumb.html)
+-   [Changelog](./CHANGELOG.md)
+-   [Breaking change schedule](./BREAKING.md)
+
+## Install
+
+Run `yarn`
+
+```shell
+yarn add @clayui/breadcrumb
+```
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

package/lib/Ellipsis.d.ts

@@ -1,7 +1,17 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
 import React from 'react';
 import Item from './Item';
 interface IEllipsisProps extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * Property to define BreadcrumbEllipsis's items.
+     */
     items: Array<React.ComponentProps<typeof Item>>;
+    /**
+     * Path to the location of the spritemap resource.
+     */
     spritemap?: string;
 }
 declare const Ellipsis: React.FunctionComponent<IEllipsisProps>;

package/lib/Ellipsis.js

@@ -19,18 +19,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -40,18 +28,9 @@ var Ellipsis = function Ellipsis(_ref) {
       spritemap = _ref.spritemap,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      active = _React$useState2[0],
-      setActive = _React$useState2[1];
-
   return /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({
-    active: active,
     className: "breadcrumb-item",
     containerElement: "li",
-    onActiveChange: function onActiveChange(newVal) {
-      return setActive(newVal);
-    },
     trigger: /*#__PURE__*/_react.default.createElement(_button.default, {
       className: "breadcrumb-link",
       displayType: "unstyled"

package/lib/Item.d.ts

@@ -1,8 +1,24 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
 import React from 'react';
 interface IItem extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * Flag to indicate if the Breadcrumb item is active or not.
+     */
     active?: boolean;
+    /**
+     * This value is used to be the target of the link.
+     */
     href?: string;
+    /**
+     * Label of the Breadcrumb item
+     */
     label: string;
+    /**
+     * Callback for when a Breadcrumb item is clicked.
+     */
     onClick?: (event: React.SyntheticEvent) => void;
 }
 declare const Item: ({ active, href, label, onClick, ...otherProps }: IItem) => JSX.Element;

package/lib/index.d.ts

@@ -1,11 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
 import React from 'react';
 import Item from './Item';
 declare type TItem = React.ComponentProps<typeof Item>;
 declare type TItems = Array<TItem>;
 interface IProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before
+     * using an ellipsis dropdown.
+     */
     ellipsisBuffer?: number;
+    /**
+     * Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.
+     */
     ellipsisProps?: Object;
+    /**
+     * Property to define Breadcrumb's items.
+     */
     items: TItems;
+    /**
+     * Path to the location of the spritemap resource.
+     */
     spritemap?: string;
 }
 declare const ClayBreadcrumb: React.FunctionComponent<IProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/breadcrumb",
-	"version": "3.49.0",
+	"version": "3.56.0",
 	"description": "ClayBreadcrumb component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -17,8 +17,8 @@
 	],
 	"scripts": {
 		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
-		"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
-		"prepublishOnly": "yarn build && yarn build:types",
+		"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "yarn build && yarn buildTypes",
 		"test": "jest --config ../../jest.config.js"
 	},
 	"keywords": [
@@ -26,11 +26,11 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/button": "^3.40.0",
-		"@clayui/drop-down": "^3.49.0",
-		"@clayui/icon": "^3.40.0",
-		"@clayui/link": "^3.45.0",
-		"@clayui/shared": "^3.49.0",
+		"@clayui/button": "^3.56.0",
+		"@clayui/drop-down": "^3.56.0",
+		"@clayui/icon": "^3.56.0",
+		"@clayui/link": "^3.56.0",
+		"@clayui/shared": "^3.56.0",
 		"classnames": "^2.2.6",
 		"warning": "^4.0.3"
 	},
@@ -42,5 +42,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "dc322a085c46b0d5746e682e8ad7c68866c975f4"
+	"gitHead": "1c33d9c709d8ce071862f0087c76ac23ce11465b"
 }

package/src/Ellipsis.tsx

@@ -26,41 +26,35 @@ const Ellipsis: React.FunctionComponent<IEllipsisProps> = ({
 	items,
 	spritemap,
 	...otherProps
-}) => {
-	const [active, setActive] = React.useState(false);
-
-	return (
-		<ClayDropDown
-			active={active}
-			className="breadcrumb-item"
-			containerElement="li"
-			onActiveChange={(newVal) => setActive(newVal)}
-			trigger={
-				<ClayButton
-					className="breadcrumb-link"
-					data-testid="breadcrumbDropdownTrigger"
-					displayType="unstyled"
+}) => (
+	<ClayDropDown
+		className="breadcrumb-item"
+		containerElement="li"
+		trigger={
+			<ClayButton
+				className="breadcrumb-link"
+				data-testid="breadcrumbDropdownTrigger"
+				displayType="unstyled"
+			>
+				<ClayIcon spritemap={spritemap} symbol="ellipsis-h" />
+				<ClayIcon spritemap={spritemap} symbol="caret-bottom" />
+			</ClayButton>
+		}
+		{...otherProps}
+	>
+		<ClayDropDown.ItemList>
+			{items.map(({href, label, onClick}, i) => (
+				<ClayDropDown.Item
+					href={href}
+					key={`breadcrumbEllipsisItem${i}`}
+					onClick={onClick}
+					title={label}
 				>
-					<ClayIcon spritemap={spritemap} symbol="ellipsis-h" />
-					<ClayIcon spritemap={spritemap} symbol="caret-bottom" />
-				</ClayButton>
-			}
-			{...otherProps}
-		>
-			<ClayDropDown.ItemList>
-				{items.map(({href, label, onClick}, i) => (
-					<ClayDropDown.Item
-						href={href}
-						key={`breadcrumbEllipsisItem${i}`}
-						onClick={onClick}
-						title={label}
-					>
-						{label}
-					</ClayDropDown.Item>
-				))}
-			</ClayDropDown.ItemList>
-		</ClayDropDown>
-	);
-};
+					{label}
+				</ClayDropDown.Item>
+			))}
+		</ClayDropDown.ItemList>
+	</ClayDropDown>
+);
 
 export default Ellipsis;

package/README.mdx

@@ -1,12 +0,0 @@
----
-title: 'Breadcrumb'
-description: 'Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.'
-lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/breadcrumb/'
-packageNpm: '@clayui/breadcrumb'
----
-
-import {Breadcrumb} from '$packages/clay-breadcrumb/docs/index';
-
-Breadcrumbs are a navigation aid for your site, use them when you need to provide a quick way to jump back to previously viewed pages or sections.
-
-<Breadcrumb />