clayui-date-picker 3.165.0

package/LICENSE.md

@@ -0,0 +1,30 @@
+Valid-License-Identifier: LicenseRef-BSD-3-Clause-Liferay
+Valid-License-Identifier: BSD-3-Clause
+License-Text:
+
+Copyright (c) 2014, Liferay Inc. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice,
+   this list of conditions and the following disclaimer.
+
+1. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+1. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software without
+   specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
+USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,19 @@
+# `@clayui/date-picker`
+
+Date and Time pickers let users select a date and time for a form.
+
+- [Documentation](https://clayui.com/docs/components/date-picker.html)
+- [Changelog](./CHANGELOG.md)
+- [Breaking change schedule](./BREAKING.md)
+
+## Install
+
+Run `yarn`
+
+```shell
+yarn add @clayui/date-picker
+```
+
+## 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/cjs/DateNavigation.js

@@ -0,0 +1,124 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DateNavigation_exports = {};
+__export(DateNavigation_exports, {
+  default: () => DateNavigation_default
+});
+module.exports = __toCommonJS(DateNavigation_exports);
+var import_button = __toESM(require("@clayui/button"));
+var import_icon = __toESM(require("@clayui/icon"));
+var import_react = __toESM(require("react"));
+var import_Helpers = require("./Helpers");
+var import_Select = __toESM(require("./Select"));
+function ClayDatePickerDateNavigation({
+  ariaLabels,
+  currentMonth,
+  disabled,
+  months,
+  onDotClicked,
+  onMonthChange,
+  spritemap,
+  years
+}) {
+  function handleChangeMonth(month) {
+    const date = (0, import_Helpers.setMonth)(years, month, currentMonth);
+    if (date) {
+      onMonthChange(date);
+    }
+  }
+  const handlePreviousMonthClicked = () => handleChangeMonth(-1);
+  const handleNextMonthClicked = () => handleChangeMonth(1);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-calendar-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-nav" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-nav-item input-date-picker-month" }, /* @__PURE__ */ import_react.default.createElement(
+    import_Select.default,
+    {
+      "aria-label": ariaLabels.selectMonth,
+      disabled,
+      name: "month",
+      onChange: (event) => onMonthChange(
+        new Date(
+          currentMonth.getFullYear(),
+          Number(event.target.value)
+        )
+      ),
+      options: months,
+      testId: "month-select",
+      value: currentMonth.getMonth()
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-nav-item input-date-picker-year" }, /* @__PURE__ */ import_react.default.createElement(
+    import_Select.default,
+    {
+      "aria-label": ariaLabels.selectYear,
+      disabled,
+      name: "year",
+      onChange: (event) => onMonthChange(
+        new Date(
+          Number(event.target.value),
+          currentMonth.getMonth()
+        )
+      ),
+      options: years,
+      testId: "year-select",
+      value: currentMonth.getFullYear()
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-nav-controls date-picker-nav-item date-picker-nav-item-expand" }, /* @__PURE__ */ import_react.default.createElement(
+    import_button.default,
+    {
+      "aria-label": ariaLabels.buttonPreviousMonth,
+      className: "nav-btn nav-btn-monospaced",
+      disabled,
+      displayType: null,
+      onClick: handlePreviousMonthClicked,
+      title: ariaLabels.buttonPreviousMonth
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icon.default, { spritemap, symbol: "angle-left" })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_button.default,
+    {
+      "aria-label": ariaLabels.buttonDot,
+      className: "nav-btn nav-btn-monospaced",
+      disabled,
+      displayType: null,
+      onClick: onDotClicked,
+      title: ariaLabels.buttonDot
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icon.default, { spritemap, symbol: "simple-circle" })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_button.default,
+    {
+      "aria-label": ariaLabels.buttonNextMonth,
+      className: "nav-btn nav-btn-monospaced",
+      disabled,
+      displayType: null,
+      onClick: handleNextMonthClicked,
+      title: ariaLabels.buttonNextMonth
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icon.default, { spritemap, symbol: "angle-right" })
+  ))));
+}
+var DateNavigation_default = ClayDatePickerDateNavigation;

package/lib/cjs/DayNumber.js

@@ -0,0 +1,116 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DayNumber_exports = {};
+__export(DayNumber_exports, {
+  default: () => DayNumber_default
+});
+module.exports = __toCommonJS(DayNumber_exports);
+var import_shared = require("@clayui/shared");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Helpers = require("./Helpers");
+function ClayDatePickerDayNumber({
+  day,
+  daysSelected,
+  disabled,
+  index,
+  isFocused,
+  onClick,
+  outOfRange,
+  range
+}) {
+  const { date, nextMonth, previousMonth } = day;
+  const [startDate, endDate] = daysSelected;
+  const isStartAndEndDateRange = startDate.toDateString() !== endDate.toDateString() && isWithinInterval(date, daysSelected);
+  const hasEndDateSelected = date.toDateString() === endDate.toDateString();
+  const hasStartDateSelected = date.toDateString() === startDate.toDateString();
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      "aria-selected": isStartAndEndDateRange || hasStartDateSelected ? true : void 0,
+      className: (0, import_classnames.default)(
+        "date-picker-col",
+        range && {
+          "c-selected": isStartAndEndDateRange,
+          "c-selected-end": hasEndDateSelected && !hasStartDateSelected,
+          "c-selected-start": hasStartDateSelected && !hasEndDateSelected
+        }
+      ),
+      role: "gridcell"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        "aria-disabled": outOfRange ? true : void 0,
+        "aria-label": (0, import_Helpers.setDate)(date, {
+          hours: 12,
+          milliseconds: 0,
+          minutes: 0,
+          seconds: 0
+        }).toDateString(),
+        className: (0, import_classnames.default)(
+          "date-picker-date date-picker-calendar-item",
+          {
+            "active": hasStartDateSelected || range && hasEndDateSelected,
+            "disabled": disabled || outOfRange,
+            "next-month-date": nextMonth,
+            "previous-month-date": previousMonth
+          }
+        ),
+        "data-index": index,
+        disabled,
+        onClick: () => onClick(date),
+        onKeyDown: (event) => {
+          if (event.key === import_shared.Keys.Spacebar) {
+            event.preventDefault();
+          }
+        },
+        onKeyUp: (event) => {
+          if (event.key === import_shared.Keys.Spacebar) {
+            onClick(date);
+          }
+        },
+        tabIndex: isFocused ? void 0 : -1,
+        type: "button"
+      },
+      date.getDate()
+    )
+  );
+}
+function isWithinInterval(date, interval) {
+  const [start, end] = interval;
+  const time = date.getTime();
+  const startTime = start.getTime();
+  const endTime = end.getTime();
+  if (startTime > endTime) {
+    return false;
+  }
+  return time >= startTime && time <= endTime;
+}
+var DayNumber_default = ClayDatePickerDayNumber;

package/lib/cjs/DaysTable.js

@@ -0,0 +1,49 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DaysTable_exports = {};
+__export(DaysTable_exports, {
+  default: () => DaysTable_default
+});
+module.exports = __toCommonJS(DaysTable_exports);
+var import_react = __toESM(require("react"));
+function ClayDatePickerDaysTable({ children, weeks }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, weeks.map((days, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "date-picker-date-row date-picker-row",
+      "data-index": index,
+      key: index,
+      role: "row"
+    },
+    days.map((day, index2) => {
+      return import_react.default.Children.only(children({ day, key: index2 }));
+    })
+  )));
+}
+var DaysTable_default = ClayDatePickerDaysTable;

package/lib/cjs/Helpers.js

@@ -0,0 +1,98 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Helpers_exports = {};
+__export(Helpers_exports, {
+  addMonths: () => addMonths,
+  clamp: () => clamp,
+  clone: () => clone,
+  formatDate: () => import_format.default,
+  isAfter: () => isAfter,
+  isBefore: () => isBefore,
+  isSameDay: () => isSameDay,
+  isValid: () => isValid,
+  parseDate: () => import_parse.default,
+  range: () => range,
+  setDate: () => setDate,
+  setMonth: () => setMonth
+});
+module.exports = __toCommonJS(Helpers_exports);
+var import_format = __toESM(require("date-fns/format"));
+var import_parse = __toESM(require("date-fns/parse"));
+function addMonths(date, months) {
+  date = clone(date);
+  date.setMonth(date.getMonth() + months);
+  return date;
+}
+function clamp(date, min, max) {
+  if (min && isBefore(date, min)) {
+    return clone(min);
+  }
+  if (max && isAfter(date, max)) {
+    return clone(max);
+  }
+  return clone(date);
+}
+function clone(date) {
+  return new Date(date instanceof Date ? date.getTime() : date);
+}
+function isAfter(a, b) {
+  return a.getTime() > b.getTime();
+}
+function isBefore(a, b) {
+  return a.getTime() < b.getTime();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isValid(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}
+function range({ end, start }) {
+  return Array.from(
+    {
+      length: end - start + 1
+    },
+    (_v, k) => k + start
+  );
+}
+function setDate(date, options) {
+  date = clone(date);
+  return Object.keys(options).reduce((acc, key) => {
+    const method = `set${key.charAt(0).toUpperCase() + key.slice(1)}`;
+    acc[method](options[key]);
+    return acc;
+  }, date);
+}
+function setMonth(range2, month, currentMonth) {
+  const date = addMonths(currentMonth, month);
+  const year = date.getFullYear();
+  if (range2.find((elem) => elem.value === year)) {
+    return date;
+  }
+}