@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/WeekSelector/tests/WeekSelector.e2e.yaml

@@ -0,0 +1,154 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+id: weekselector
+type: Box
+
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        ws_with_value:
+          _date: '2024-06-10'
+        ws_clearable:
+          _date: '2024-01-08'
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: ws_basic
+    type: WeekSelector
+    properties:
+      title: Basic Week
+
+  - id: ws_with_value
+    type: WeekSelector
+    properties:
+      title: With Value
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: ws_disabled
+    type: WeekSelector
+    properties:
+      title: Disabled
+      disabled: true
+
+  - id: ws_small
+    type: WeekSelector
+    properties:
+      title: Small Size
+      size: small
+
+  - id: ws_large
+    type: WeekSelector
+    properties:
+      title: Large Size
+      size: large
+
+  - id: ws_placeholder
+    type: WeekSelector
+    properties:
+      title: Custom Placeholder
+      placeholder: Pick a week...
+
+  - id: ws_borderless
+    type: WeekSelector
+    properties:
+      title: Borderless
+      bordered: false
+
+  - id: ws_no_allowclear
+    type: WeekSelector
+    properties:
+      title: No Allow Clear
+      allowClear: false
+
+  - id: ws_with_title
+    type: WeekSelector
+    properties:
+      title: Week with Title
+
+  - id: ws_with_label
+    type: WeekSelector
+    properties:
+      title: Week Label
+      label:
+        extra: Select a week from the calendar
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: ws_onchange
+    type: WeekSelector
+    properties:
+      title: OnChange Test
+    events:
+      onChange:
+        - id: set_onchange
+          type: SetState
+          params:
+            ws_onchange_value:
+              _event: value
+
+  - id: ws_onchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: ws_onchange_value
+              - null
+          then: Week selected
+          else: ''
+
+  # ============================================
+  # INTERACTION TESTS
+  # ============================================
+
+  - id: ws_interaction
+    type: WeekSelector
+    properties:
+      title: Interaction Test
+
+  - id: ws_clearable
+    type: WeekSelector
+    properties:
+      title: Clearable
+      allowClear: true
+
+  # ============================================
+  # PRESETS
+  # ============================================
+
+  # Formatted as the start of the week, so the assertions read as dates rather
+  # than ordinal week numbers.
+  - id: ws_presets
+    type: WeekSelector
+    properties:
+      title: Presets
+      format: YYYY-MM-DD
+      presets:
+        - label: Week of mid 2024
+          value:
+            _date: '2024-06-15'
+        - label: Week of 15 January 2024
+          value: '2024-01-15'

package/dist/blocks/WeekSelector/tests.yaml

@@ -0,0 +1,122 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- id: properties.title
+  type: WeekSelector
+  properties:
+    title: WeekSelector title
+- id: 'property.allowClear: false'
+  type: WeekSelector
+  properties:
+    allowClear: false
+- id: 'property.autoFocus: true'
+  type: WeekSelector
+  properties:
+    autoFocus: true
+- id: 'properties.bordered: false'
+  type: WeekSelector
+  properties:
+    bordered: false
+- id: 'properties.disabledDates.min'
+  type: WeekSelector
+  properties:
+    disabledDates:
+      min: 2020-10-20
+- id: 'properties.disabledDates.max'
+  type: WeekSelector
+  properties:
+    disabledDates:
+      max: 2020-08-15
+- id: 'properties.disabledDates.dates'
+  type: WeekSelector
+  properties:
+    disabledDates:
+      dates:
+        - _date: 2020-10-26
+        - 2020-10-01
+        - 2020-11-01
+- id: 'properties.disabledDates.ranges'
+  type: WeekSelector
+  properties:
+    disabledDates:
+      ranges:
+        - ['2020-07-01', '2020-08-01']
+        - - 2020-10-01
+          - 2020-11-02
+
+- id: 'property.disabled: true'
+  type: WeekSelector
+  properties:
+    disabled: true
+- id: 'property.format: YYYY-WW'
+  type: WeekSelector
+  properties:
+    format: YYYY-WW
+- id: 'property.placeholder: - Select this Week'
+  type: WeekSelector
+  properties:
+    placeholder: Select this Week
+- id: 'property.size: small'
+  type: WeekSelector
+  properties:
+    size: small
+- id: 'property.size: large'
+  type: WeekSelector
+  properties:
+    size: large
+- id: 'property.suffixIcon: CalendarFilled'
+  type: WeekSelector
+  properties:
+    suffixIcon: CalendarFilled
+- id: 'property.suffixIcon: CalendarFilled.blue'
+  type: WeekSelector
+  properties:
+    suffixIcon:
+      name: CalendarFilled
+      color: blue
+- id: 'properties.inputStyle: CSS style applied'
+  type: WeekSelector
+  properties:
+    inputStyle:
+      border: 1px solid red
+- id: 'property.label span: 5'
+  type: WeekSelector
+  properties:
+    label:
+      span: 5
+- id: 'property.label align: right'
+  type: WeekSelector
+  properties:
+    label:
+      align: right
+- id: 'property.label inline: true'
+  type: WeekSelector
+  properties:
+    label:
+      inline: true
+- id: 'property.label disabled: true'
+  type: WeekSelector
+  properties:
+    label:
+      disabled: true
+- id: 'property.label colon: false'
+  type: WeekSelector
+  properties:
+    label:
+      colon: false
+- id: 'property.label extra: extra text added'
+  type: WeekSelector
+  properties:
+    label:
+      extra: extra text added

package/dist/blocks.js

@@ -81,6 +81,8 @@ export { default as Steps } from './blocks/Steps/Steps.js';
 export { default as Switch } from './blocks/Switch/Switch.js';
 export { default as Tabs } from './blocks/Tabs/Tabs.js';
 export { default as Tag } from './blocks/Tag/Tag.js';
+export { default as TagMultipleSelector } from './blocks/TagMultipleSelector/TagMultipleSelector.js';
+export { default as TagSelector } from './blocks/TagSelector/TagSelector.js';
 export { default as TimelineList } from './blocks/TimelineList/TimelineList.js';
 export { default as TextArea } from './blocks/TextArea/TextArea.js';
 export { default as TextInput } from './blocks/TextInput/TextInput.js';

package/dist/disabledDate.js

@@ -20,29 +20,101 @@ import { type } from '@lowdefy/helpers';
 dayjs.extend(utc);
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
-const disabledDate = (disabledDates = {})=>{
-    const min = type.isNone(disabledDates.min) ? undefined : dayjs(disabledDates.min).utc().startOf('day');
-    const max = type.isNone(disabledDates.max) ? undefined : dayjs(disabledDates.max).utc().endOf('day');
-    const dates = (disabledDates.dates || []).map((date)=>dayjs(date).utc().startOf('day'));
-    const ranges = (disabledDates.ranges || []).map((range)=>{
-        if (type.isArray(range) && range.length === 2) {
-            return [
-                dayjs(range[0]).utc().startOf('day'),
-                dayjs(range[1]).utc().endOf('day')
-            ];
+// A picker calls disabledDate with the dayjs instance its panel works in, which is a UTC mode
+// instance when the block reads its value as a UTC wall clock and a local mode instance when it
+// does not. Both name the calendar date the user sees, so it is the wall clock that is compared and
+// the bounds are read the same way. Comparing the instants instead makes the same calendar date
+// disabled or allowed depending on which mode it arrives in.
+const toWallClock = (date)=>{
+    // Wrap with our dayjs to ensure the utc plugin is available — antd v6's internal dayjs instance
+    // may not have it loaded.
+    const wrapped = dayjs(date);
+    return dayjs.utc(wrapped.format('YYYY-MM-DDTHH:mm:ss.SSS'));
+};
+function toConfiguredDate({ date, key }) {
+    if (type.isNone(date)) {
+        throw new Error(`disabledDates.${key} is missing.`);
+    }
+    if (!dayjs(date).isValid()) {
+        throw new Error(`disabledDates.${key} is not a date. Received ${JSON.stringify(date)}.`);
+    }
+    return toWallClock(date);
+}
+function toConfiguredArray({ key, value }) {
+    if (type.isNone(value)) return [];
+    if (!type.isArray(value)) {
+        throw new Error(`disabledDates.${key} is not an array. Received ${JSON.stringify(value)}.`);
+    }
+    return value;
+}
+// A range is documented as { from, to }. An array of a from and a to date is the shape the block
+// read before, so it is still accepted. Anything else is a config error: dropping it left a range
+// that read as valid config but disabled nothing.
+function toRangeBounds({ index, range }) {
+    if (type.isArray(range)) {
+        if (range.length !== 2) {
+            throw new Error(`disabledDates.ranges[${index}] is not an array of a from and a to date. Received ${JSON.stringify(range)}.`);
         }
-        return null;
-    }).filter((range)=>range !== null);
+        return {
+            from: range[0],
+            to: range[1]
+        };
+    }
+    if (type.isObject(range)) {
+        return {
+            from: range.from,
+            to: range.to
+        };
+    }
+    throw new Error(`disabledDates.ranges[${index}] is not an object with a from and a to date. Received ${JSON.stringify(range)}.`);
+}
+const disabledDate = (disabledDatesConfig)=>{
+    if (!type.isNone(disabledDatesConfig) && !type.isObject(disabledDatesConfig)) {
+        throw new Error(`disabledDates is not an object. Received ${JSON.stringify(disabledDatesConfig)}.`);
+    }
+    const disabledDates = disabledDatesConfig ?? {};
+    const min = type.isNone(disabledDates.min) ? undefined : toConfiguredDate({
+        date: disabledDates.min,
+        key: 'min'
+    }).startOf('day');
+    const max = type.isNone(disabledDates.max) ? undefined : toConfiguredDate({
+        date: disabledDates.max,
+        key: 'max'
+    }).endOf('day');
+    const dates = toConfiguredArray({
+        key: 'dates',
+        value: disabledDates.dates
+    }).map((date, index)=>toConfiguredDate({
+            date,
+            key: `dates[${index}]`
+        }).startOf('day'));
+    const ranges = toConfiguredArray({
+        key: 'ranges',
+        value: disabledDates.ranges
+    }).map((range, index)=>{
+        const { from, to } = toRangeBounds({
+            index,
+            range
+        });
+        return [
+            toConfiguredDate({
+                date: from,
+                key: `ranges[${index}].from`
+            }).startOf('day'),
+            toConfiguredDate({
+                date: to,
+                key: `ranges[${index}].to`
+            }).endOf('day')
+        ];
+    });
     return (currentDate)=>{
-        // Wrap with our dayjs to ensure utc plugin is available — antd v6's internal
-        // dayjs instance may not have it loaded.
-        const utcCurrentData = dayjs(currentDate).utc();
-        if (min && utcCurrentData.isBefore(min)) return true;
-        if (max && utcCurrentData.isAfter(max)) return true;
-        let match = dates.find((date)=>date.isSame(utcCurrentData.startOf('day')));
+        const current = toWallClock(currentDate);
+        if (min && current.isBefore(min)) return true;
+        if (max && current.isAfter(max)) return true;
+        let match = dates.find((date)=>date.isSame(current.startOf('day')));
         if (match) return true;
         ranges.forEach((range)=>{
-            if (utcCurrentData.startOf('day').isSameOrAfter(range[0]) && utcCurrentData.endOf('day').isSameOrBefore(range[1])) {
+            if (current.startOf('day').isSameOrAfter(range[0]) && current.endOf('day').isSameOrBefore(range[1])) {
                 match = true;
             }
         });

package/dist/e2e.js

@@ -70,6 +70,8 @@ export { default as Steps } from './blocks/Steps/e2e.js';
 export { default as Switch } from './blocks/Switch/e2e.js';
 export { default as Tabs } from './blocks/Tabs/e2e.js';
 export { default as Tag } from './blocks/Tag/e2e.js';
+export { default as TagMultipleSelector } from './blocks/TagMultipleSelector/e2e.js';
+export { default as TagSelector } from './blocks/TagSelector/e2e.js';
 export { default as TextArea } from './blocks/TextArea/e2e.js';
 export { default as TextInput } from './blocks/TextInput/e2e.js';
 export { default as TimelineList } from './blocks/TimelineList/e2e.js';

package/dist/getPresets.js

@@ -0,0 +1,151 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import { renderHtml } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import disabledDate from './disabledDate.js';
+import './pickerPresetsStyle.css';
+dayjs.extend(utc);
+// The picker hands a preset value straight to onChange, so a preset is read exactly as the block
+// reads and writes its value: the date pickers work in a UTC wall clock (dayjs.utc(value)), and
+// onChange normalises a UTC mode dayjs to the same instant a cell click produces. DateTimeSelector
+// without selectUTC reads its value in local time, so there the date is used as the instant it is.
+function toPickerDate({ date, local, preset }) {
+    // dayjs reads an undefined date as now, which would make a mistyped preset select today.
+    if (type.isNone(date)) {
+        throw new Error(`Preset value is missing. Received ${JSON.stringify(preset)}.`);
+    }
+    const pickerDate = local ? dayjs(date) : dayjs.utc(date);
+    if (!pickerDate.isValid()) {
+        throw new Error(`Preset value is not a date. Received ${JSON.stringify(preset)}.`);
+    }
+    return pickerDate;
+}
+// The picker does not check the arity of a preset value. A range picker commits a value of one date
+// as a range of one date, and a single picker throws inside its formatter. The block knows which
+// shape it takes, so the mismatch is caught here rather than inferred from the configured value.
+function toPickerValue({ local, preset, range }) {
+    if (range) {
+        if (!type.isArray(preset.value) || preset.value.length !== 2) {
+            throw new Error(`Preset value is not an array of a start and an end date. Received ${JSON.stringify(preset)}.`);
+        }
+        return preset.value.map((date)=>toPickerDate({
+                date,
+                local,
+                preset
+            }));
+    }
+    if (type.isArray(preset.value)) {
+        throw new Error(`Preset value is an array, but the block selects a single date. Received ${JSON.stringify(preset)}.`);
+    }
+    return toPickerDate({
+        date: preset.value,
+        local,
+        preset
+    });
+}
+// The scan walks a day at a time from one end of the range towards the other, so it visits the
+// range at most once and only runs at all when that end is disabled.
+function firstSelectable({ from, isDisabledDate, step, to }) {
+    let date = from;
+    while(step > 0 ? !date.isAfter(to, 'day') : !date.isBefore(to, 'day')){
+        if (!isDisabledDate(date)) return date;
+        date = date.add(step, 'day');
+    }
+    return undefined;
+}
+// The picker validates a preset against disabledDate on click, and rejects it by writing the value
+// to the input, marking it invalid and leaving the popup open without committing anything. Rather
+// than offer a shortcut that does that, a range is narrowed to the dates it may select, and a
+// preset left with nothing to select is disabled.
+function toSelectableValue({ isDisabledDate, value }) {
+    if (!type.isArray(value)) {
+        if (isDisabledDate(value)) return undefined;
+        return value;
+    }
+    // The picker orders a reversed range itself, so the scan reads the range in calendar order.
+    const [from, to] = value[0].isAfter(value[1]) ? [
+        value[1],
+        value[0]
+    ] : value;
+    const start = firstSelectable({
+        from,
+        isDisabledDate,
+        step: 1,
+        to
+    });
+    if (!start) return undefined;
+    const end = firstSelectable({
+        from: to,
+        isDisabledDate,
+        step: -1,
+        to: start
+    });
+    return [
+        start,
+        end
+    ];
+}
+// The picker's preset panel has no disabled state and renders the label it is given inside its own
+// list item, so the label carries the marker the stylesheet disables the list item by.
+function toLabel({ disabled, label }) {
+    if (!disabled) return label;
+    return /*#__PURE__*/ React.createElement("span", {
+        className: "lf-picker-preset-disabled"
+    }, label);
+}
+const getPresets = ({ disabledDates, local, methods, presets, range })=>{
+    if (type.isNone(presets)) return undefined;
+    if (!type.isArray(presets)) {
+        throw new Error(`Presets is not an array. Received ${JSON.stringify(presets)}.`);
+    }
+    // Built from the same config as the picker's disabledDate prop, so a preset is offered on exactly
+    // the terms the calendar cells are.
+    const isDisabledDate = type.isNone(disabledDates) ? undefined : disabledDate(disabledDates);
+    return presets.map((preset)=>{
+        if (!type.isObject(preset)) {
+            throw new Error(`Preset is not an object. Received ${JSON.stringify(preset)}.`);
+        }
+        // renderHtml renders nothing for a missing label, which would list an empty shortcut.
+        if (!type.isString(preset.label)) {
+            throw new Error(`Preset label is not a string. Received ${JSON.stringify(preset)}.`);
+        }
+        const value = toPickerValue({
+            local,
+            preset,
+            range
+        });
+        const selectableValue = isDisabledDate ? toSelectableValue({
+            isDisabledDate,
+            value
+        }) : value;
+        const disabled = type.isNone(selectableValue);
+        return {
+            label: toLabel({
+                disabled,
+                label: renderHtml({
+                    html: preset.label,
+                    methods
+                })
+            }),
+            // A disabled preset keeps its configured value. The stylesheet stops the list item receiving
+            // the click that would read it.
+            value: disabled ? value : selectableValue
+        };
+    });
+};
+export default getPresets;

package/dist/getTagColor.js

@@ -0,0 +1,44 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Tableau-10 categorical palette — mid-saturation hues that read on both the
+// light and dark canvas.
+const PALETTE = [
+    '#4E79A7',
+    '#F28E2B',
+    '#E15759',
+    '#76B7B2',
+    '#59A14F',
+    '#EDC948',
+    '#B07AA1',
+    '#FF9DA7',
+    '#9C755F',
+    '#BAB0AC'
+];
+// djb2 — tiny, deterministic string hash for stable palette assignment.
+function hashString(s) {
+    let h = 5381;
+    for(let i = 0; i < s.length; i += 1)h = (h << 5) + h + s.charCodeAt(i) | 0;
+    return Math.abs(h);
+}
+// Resolve the pill color for a tag option. An explicit option.color wins;
+// otherwise a hash of the option value picks a stable palette color so a given
+// value keeps the same hue on every render. Returns null in single-accent mode
+// (colored: false) so the CSS primary look takes over.
+function getTagColor({ option, colored }) {
+    if (option.color) return option.color;
+    if (!colored) return null;
+    return PALETTE[hashString(`${option.value}`) % PALETTE.length];
+}
+export default getTagColor;

package/dist/getTagSelectorOptions.js

@@ -0,0 +1,30 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// Normalize TagSelector / TagMultipleSelector options into a common
+// { label, value, color, disabled } shape. Primitives become
+// { label: `${value}`, value } so the rest of the pill rendering is uniform.
+function getTagSelectorOptions({ options }) {
+    return (options ?? []).map((option)=>type.isPrimitive(option) ? {
+            label: `${option}`,
+            value: option
+        } : {
+            label: type.isNone(option.label) ? `${option.value}` : option.label,
+            value: option.value,
+            color: option.color,
+            disabled: option.disabled
+        });
+}
+export default getTagSelectorOptions;

package/dist/metas.js

@@ -81,6 +81,8 @@ export { default as Steps } from './blocks/Steps/meta.js';
 export { default as Switch } from './blocks/Switch/meta.js';
 export { default as Tabs } from './blocks/Tabs/meta.js';
 export { default as Tag } from './blocks/Tag/meta.js';
+export { default as TagMultipleSelector } from './blocks/TagMultipleSelector/meta.js';
+export { default as TagSelector } from './blocks/TagSelector/meta.js';
 export { default as TextArea } from './blocks/TextArea/meta.js';
 export { default as TextInput } from './blocks/TextInput/meta.js';
 export { default as TimelineList } from './blocks/TimelineList/meta.js';

package/dist/pickerPresetsStyle.css

@@ -0,0 +1,26 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@layer components {
+  /* The picker's preset panel puts its click and hover handlers on the list item and takes only a
+     label from the block, so a preset that cannot be selected is marked in its label and the list
+     item around it is disabled here. The components layer is ordered after the antd layer, so this
+     wins over the panel's own list item styles. */
+  .ant-picker-presets li:has(.lf-picker-preset-disabled) {
+    color: var(--ant-color-text-disabled);
+    pointer-events: none;
+  }
+}