@embeddable.com/remarkable-ui 0.1.14 → 0.1.16

package/dist/KpiChartNumberComparisonPro.js.map

@@ -1 +1 @@
-{"version":3,"file":"KpiChartNumberComparisonPro.js","sources":["../src/remarkable-pro/components/utils/timeRange.utils.ts","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/KpiChartNumberComparisonPro.emb.ts"],"sourcesContent":["import { TimeRange } from '@embeddable.com/core';\nimport { Theme } from '../../theme/theme.types';\nimport { resolveI18nString } from '../component.utils';\n\nexport const getComparisonPeriodDateRange = (\n  primaryDateRange: TimeRange,\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): TimeRange => {\n  if (!primaryDateRange || !comparisonPeriod) {\n    return undefined;\n  }\n\n  const primaryDateRangeRange = primaryDateRange?.relativeTimeString\n    ? theme.defaults.dateRangesOptions\n        .find((option) => option.value === primaryDateRange?.relativeTimeString)\n        ?.getRange()\n    : primaryDateRange;\n\n  const comparisonPeriodOption = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n\n  return comparisonPeriodOption?.getRange(primaryDateRangeRange);\n};\n\nexport const getComparisonPeriodLabel = (\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): string => {\n  const option = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n  return option ? resolveI18nString(option.label) : '';\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure, TimeRange } from '@embeddable.com/core';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { KpiChart } from '../../../../../remarkable-ui';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { useEffect } from 'react';\nimport {\n  getComparisonPeriodDateRange,\n  getComparisonPeriodLabel,\n} from '../../../utils/timeRange.utils';\n\ntype KpiChartNumberComparisonProProp = {\n  changeFontSize: number;\n  comparisonPeriod?: string;\n  description: string;\n  displayChangeAsPercentage?: boolean;\n  fontSize: number;\n  measure: Measure;\n  primaryDateRange: TimeRange;\n  results: DataResponse;\n  resultsComparison: DataResponse | undefined;\n  reversePositiveNegativeColors?: boolean;\n  title: string;\n  comparisonDateRange: TimeRange;\n  setComparisonDateRange: (dateRange: TimeRange) => void;\n};\n\nconst KpiChartNumberComparisonPro = (props: KpiChartNumberComparisonProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description } = resolveI18nProps(props);\n  const {\n    changeFontSize,\n    comparisonPeriod,\n    comparisonDateRange,\n    displayChangeAsPercentage,\n    fontSize,\n    measure,\n    primaryDateRange,\n    results,\n    resultsComparison,\n    reversePositiveNegativeColors,\n    setComparisonDateRange,\n  } = props;\n\n  useEffect(() => {\n    const newComparisonDateRange = getComparisonPeriodDateRange(\n      primaryDateRange,\n      comparisonPeriod,\n      theme,\n    );\n    setComparisonDateRange(newComparisonDateRange);\n  }, [comparisonPeriod, JSON.stringify(primaryDateRange), theme]);\n\n  const value: number = results.data?.[0]?.[measure.name];\n  const comparisonValue = comparisonDateRange\n    ? resultsComparison?.data?.[0]?.[measure.name]\n    : undefined;\n\n  const themeFormatter = getThemeFormatter(theme);\n  const valueFormatter = (valueToFormat: number) => themeFormatter.data(measure, valueToFormat);\n  const comparisonLabel = `vs ${getComparisonPeriodLabel(comparisonPeriod, theme).toLowerCase()}`;\n\n  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[measure]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <KpiChart\n        value={value}\n        comparisonValue={comparisonValue}\n        valueFormatter={valueFormatter}\n        valueFontSize={fontSize}\n        changeFontSize={changeFontSize}\n        invertChangeColors={reversePositiveNegativeColors}\n        showChangeAsPercentage={displayChangeAsPercentage}\n        comparisonLabel={comparisonLabel}\n      />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberComparisonPro;\n","import { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport {\n  dataset,\n  description,\n  dimensionTime,\n  genericBoolean,\n  genericNumber,\n  genericTimeRange,\n  measure,\n  title,\n} from '../../../component.constants';\nimport KpiChartNumberComparisonPro from './index';\nimport { loadData, TimeRange } from '@embeddable.com/core';\nimport ComparisonPeriodType from '../../../types/ComparisonPeriod.type.emb';\n\nexport const meta = {\n  name: 'KpiChartNumberComparisonPro',\n  label: 'Kpi Chart - Number Comparison',\n  category: 'Kpi Charts',\n  inputs: [\n    dataset,\n    measure,\n    { ...dimensionTime, name: 'timeProperty', label: 'Time Property' },\n    {\n      ...genericTimeRange,\n      name: 'primaryDateRange',\n      label: 'Primary Date Range',\n      description: 'You can also connect this to a date range selector using its variable',\n      category: 'Component Data',\n    },\n    {\n      name: 'comparisonPeriod',\n      type: ComparisonPeriodType,\n      label: 'Comparison Period',\n      description: 'You can also connect this to a comparison period selector using its variable',\n      category: 'Component Data',\n    },\n    title,\n    description,\n    {\n      ...genericBoolean,\n      name: 'displayChangeAsPercentage',\n      label: 'Display Change as %',\n      defaultValue: false,\n    },\n    {\n      ...genericBoolean,\n      name: 'reversePositiveNegativeColors',\n      label: 'Reverse Positive/Negative Colors',\n      defaultValue: false,\n    },\n    { ...genericNumber, name: 'fontSize', label: 'Font Size', defaultValue: 44, required: true },\n    {\n      ...genericNumber,\n      name: 'changeFontSize',\n      label: 'Change Font Size',\n      defaultValue: 16,\n      required: true,\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\ntype KpiChartNumberComparisonProState = {\n  comparisonDateRange: TimeRange;\n};\n\nexport default defineComponent(KpiChartNumberComparisonPro, meta, {\n  /* @ts-expect-error - to be fixed in @embeddable.com/react */\n  props: (\n    inputs: Inputs<typeof meta>,\n    [state, setState]: [\n      KpiChartNumberComparisonProState,\n      (state: KpiChartNumberComparisonProState) => void,\n    ],\n  ) => {\n    return {\n      ...inputs,\n      comparisonDateRange: state?.comparisonDateRange,\n      setComparisonDateRange: (comparisonDateRange: TimeRange) => setState({ comparisonDateRange }),\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.measure],\n        limit: 1,\n        filters:\n          inputs.primaryDateRange && inputs.timeProperty\n            ? [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: inputs.primaryDateRange,\n                },\n              ]\n            : undefined,\n      }),\n      resultsComparison:\n        inputs.primaryDateRange && inputs.timeProperty && state?.comparisonDateRange\n          ? loadData({\n              from: inputs.dataset,\n              select: [inputs.measure],\n              limit: 1,\n              filters: [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: state.comparisonDateRange,\n                },\n              ],\n            })\n          : undefined,\n    };\n  },\n});\n"],"names":["getComparisonPeriodDateRange","primaryDateRange","comparisonPeriod","theme","primaryDateRangeRange","_a","option","comparisonPeriodOption","getComparisonPeriodLabel","resolveI18nString","KpiChartNumberComparisonPro","props","useTheme","i18nSetup","title","description","resolveI18nProps","changeFontSize","comparisonDateRange","displayChangeAsPercentage","fontSize","measure","results","resultsComparison","reversePositiveNegativeColors","setComparisonDateRange","useEffect","newComparisonDateRange","value","_b","comparisonValue","_d","_c","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","comparisonLabel","jsx","ChartCard","KpiChart","meta","dataset","dimensionTime","genericTimeRange","ComparisonPeriodType","genericBoolean","genericNumber","KpiChartNumberComparisonPro_emb","defineComponent","inputs","state","setState","loadData"],"mappings":"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"}
+{"version":3,"file":"KpiChartNumberComparisonPro.js","sources":["../src/remarkable-pro/components/utils/timeRange.utils.ts","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/KpiChartNumberComparisonPro.emb.ts"],"sourcesContent":["import { TimeRange } from '@embeddable.com/core';\nimport { Theme } from '../../theme/theme.types';\nimport { resolveI18nString } from '../component.utils';\n\nexport const getComparisonPeriodDateRange = (\n  primaryDateRange: TimeRange,\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): TimeRange => {\n  if (!primaryDateRange || !comparisonPeriod) {\n    return undefined;\n  }\n\n  const primaryDateRangeRange = primaryDateRange?.relativeTimeString\n    ? theme.defaults.dateRangesOptions\n        .find((option) => option.value === primaryDateRange?.relativeTimeString)\n        ?.getRange()\n    : primaryDateRange;\n\n  const comparisonPeriodOption = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n\n  return comparisonPeriodOption?.getRange(primaryDateRangeRange);\n};\n\nexport const getComparisonPeriodLabel = (\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): string => {\n  const option = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n  return option ? resolveI18nString(option.label) : '';\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure, TimeRange } from '@embeddable.com/core';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { KpiChart } from '../../../../../remarkable-ui';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { useEffect } from 'react';\nimport {\n  getComparisonPeriodDateRange,\n  getComparisonPeriodLabel,\n} from '../../../utils/timeRange.utils';\n\ntype KpiChartNumberComparisonProProp = {\n  changeFontSize: number;\n  comparisonPeriod?: string;\n  description: string;\n  displayChangeAsPercentage?: boolean;\n  fontSize: number;\n  measure: Measure;\n  primaryDateRange: TimeRange;\n  results: DataResponse;\n  resultsComparison: DataResponse | undefined;\n  reversePositiveNegativeColors?: boolean;\n  title: string;\n  percentageDecimalPlaces: number;\n  comparisonDateRange: TimeRange;\n  setComparisonDateRange: (dateRange: TimeRange) => void;\n};\n\nconst KpiChartNumberComparisonPro = (props: KpiChartNumberComparisonProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description } = resolveI18nProps(props);\n  const {\n    changeFontSize,\n    comparisonPeriod,\n    comparisonDateRange,\n    displayChangeAsPercentage,\n    fontSize,\n    measure,\n    primaryDateRange,\n    results,\n    resultsComparison,\n    reversePositiveNegativeColors,\n    percentageDecimalPlaces,\n    setComparisonDateRange,\n  } = props;\n\n  useEffect(() => {\n    const newComparisonDateRange = getComparisonPeriodDateRange(\n      primaryDateRange,\n      comparisonPeriod,\n      theme,\n    );\n    setComparisonDateRange(newComparisonDateRange);\n  }, [comparisonPeriod, JSON.stringify(primaryDateRange), theme]);\n\n  const value: number = results.data?.[0]?.[measure.name];\n  const comparisonValue = comparisonDateRange\n    ? resultsComparison?.data?.[0]?.[measure.name]\n    : undefined;\n\n  const themeFormatter = getThemeFormatter(theme);\n  const valueFormatter = (valueToFormat: number) => themeFormatter.data(measure, valueToFormat);\n  const comparisonLabel = `vs ${getComparisonPeriodLabel(comparisonPeriod, theme).toLowerCase()}`;\n\n  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[measure]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <KpiChart\n        value={value}\n        comparisonValue={comparisonValue}\n        valueFormatter={valueFormatter}\n        valueFontSize={fontSize}\n        changeFontSize={changeFontSize}\n        invertChangeColors={reversePositiveNegativeColors}\n        showChangeAsPercentage={displayChangeAsPercentage}\n        comparisonLabel={comparisonLabel}\n        percentageDecimalPlaces={percentageDecimalPlaces}\n      />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberComparisonPro;\n","import { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport {\n  dataset,\n  description,\n  dimensionTime,\n  genericBoolean,\n  genericNumber,\n  genericTimeRange,\n  measure,\n  title,\n} from '../../../component.constants';\nimport KpiChartNumberComparisonPro from './index';\nimport { loadData, TimeRange } from '@embeddable.com/core';\nimport ComparisonPeriodType from '../../../types/ComparisonPeriod.type.emb';\n\nexport const meta = {\n  name: 'KpiChartNumberComparisonPro',\n  label: 'Kpi Chart - Number Comparison',\n  category: 'Kpi Charts',\n  inputs: [\n    dataset,\n    measure,\n    { ...dimensionTime, name: 'timeProperty', label: 'Time Property' },\n    {\n      ...genericTimeRange,\n      name: 'primaryDateRange',\n      label: 'Primary Date Range',\n      description: 'You can also connect this to a date range selector using its variable',\n      category: 'Component Data',\n    },\n    {\n      name: 'comparisonPeriod',\n      type: ComparisonPeriodType,\n      label: 'Comparison Period',\n      description: 'You can also connect this to a comparison period selector using its variable',\n      category: 'Component Data',\n    },\n    title,\n    description,\n    {\n      ...genericBoolean,\n      name: 'displayChangeAsPercentage',\n      label: 'Display Change as %',\n      defaultValue: false,\n    },\n    {\n      ...genericNumber,\n      name: 'percentageDecimalPlaces',\n      label: 'Percentage Decimal Places',\n      defaultValue: 1,\n    },\n    {\n      ...genericBoolean,\n      name: 'reversePositiveNegativeColors',\n      label: 'Reverse Positive/Negative Colors',\n      defaultValue: false,\n    },\n    { ...genericNumber, name: 'fontSize', label: 'Font Size', defaultValue: 44, required: true },\n    {\n      ...genericNumber,\n      name: 'changeFontSize',\n      label: 'Change Font Size',\n      defaultValue: 16,\n      required: true,\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\ntype KpiChartNumberComparisonProState = {\n  comparisonDateRange: TimeRange;\n};\n\nexport default defineComponent(KpiChartNumberComparisonPro, meta, {\n  /* @ts-expect-error - to be fixed in @embeddable.com/react */\n  props: (\n    inputs: Inputs<typeof meta>,\n    [state, setState]: [\n      KpiChartNumberComparisonProState,\n      (state: KpiChartNumberComparisonProState) => void,\n    ],\n  ) => {\n    return {\n      ...inputs,\n      comparisonDateRange: state?.comparisonDateRange,\n      setComparisonDateRange: (comparisonDateRange: TimeRange) => setState({ comparisonDateRange }),\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.measure],\n        limit: 1,\n        filters:\n          inputs.primaryDateRange && inputs.timeProperty\n            ? [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: inputs.primaryDateRange,\n                },\n              ]\n            : undefined,\n      }),\n      resultsComparison:\n        inputs.primaryDateRange && inputs.timeProperty && state?.comparisonDateRange\n          ? loadData({\n              from: inputs.dataset,\n              select: [inputs.measure],\n              limit: 1,\n              filters: [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: state.comparisonDateRange,\n                },\n              ],\n            })\n          : undefined,\n    };\n  },\n});\n"],"names":["getComparisonPeriodDateRange","primaryDateRange","comparisonPeriod","theme","primaryDateRangeRange","_a","option","comparisonPeriodOption","getComparisonPeriodLabel","resolveI18nString","KpiChartNumberComparisonPro","props","useTheme","i18nSetup","title","description","resolveI18nProps","changeFontSize","comparisonDateRange","displayChangeAsPercentage","fontSize","measure","results","resultsComparison","reversePositiveNegativeColors","percentageDecimalPlaces","setComparisonDateRange","useEffect","newComparisonDateRange","value","_b","comparisonValue","_d","_c","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","comparisonLabel","jsx","ChartCard","KpiChart","meta","dataset","dimensionTime","genericTimeRange","ComparisonPeriodType","genericBoolean","genericNumber","KpiChartNumberComparisonPro_emb","defineComponent","inputs","state","setState","loadData"],"mappings":"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"}

package/dist/KpiChartNumberPro.js

@@ -1,9 +1,9 @@
 import { useTheme as h, defineComponent as f } from "@embeddable.com/react";
-import { i as C, r as b, j as m, d as K, w as g, t as x, c as F, X as N, o as S } from "./component.constants-DIhZCTG3.js";
-import { C as j } from "./ChartCard-11lQWjXq.js";
+import { i as C, r as b, j as m, d as K, w as g, t as x, c as F, X as N, o as S } from "./component.constants-Bn9l4N1t.js";
+import { C as j } from "./ChartCard-Cb0QE9kP.js";
 import "react";
-import { K as v } from "./KpiChart-Cp9ZUyRz.js";
-import { g as z } from "./formatter.utils-CuZlh4EL.js";
+import { K as v } from "./KpiChart-B2OqbXRg.js";
+import { g as z } from "./formatter.utils-Ba_5cIcm.js";
 const P = (e) => {
   var s, o;
   const a = h();

package/dist/MultiSelectFieldPro.js

@@ -1,6 +1,6 @@
 import { defineComponent as i } from "@embeddable.com/react";
-import { d as r, z as s, t as d, c as u, _ as m, V as t, o as c } from "./component.constants-DIhZCTG3.js";
-import { M as p, a as f } from "./index-DqKfDjMs.js";
+import { d as r, z as s, t as d, c as u, _ as m, V as t, o as c } from "./component.constants-Bn9l4N1t.js";
+import { M as p, a as f } from "./index-DYBt2TuY.js";
 const g = {
   name: "MultiSelectFieldPro",
   label: "Multi Select Field",

package/dist/PieChartPro.js

@@ -1,6 +1,6 @@
-import { d as a, w as s, z as t, t as o, c as n, s as i, Y as r, e as m, f as l, V as d, o as c } from "./component.constants-DIhZCTG3.js";
+import { d as a, w as s, z as t, t as o, c as n, s as i, Y as r, e as m, f as l, V as d, o as c } from "./component.constants-Bn9l4N1t.js";
 import { defineComponent as p } from "@embeddable.com/react";
-import { P as u } from "./index-B8y21zu2.js";
+import { P as u } from "./index-Chlmh1dF.js";
 const C = {
   name: "PieChartPro",
   label: "Pie Chart",

package/dist/{SingleSelectField-D1E9OJxC.js → SingleSelectField-BJnoOYrw.js}

@@ -1,6 +1,6 @@
-import { j as l, a8 as R, ab as D, ac as E, a9 as h, aa as k } from "./component.constants-DIhZCTG3.js";
+import { j as l, a8 as R, ab as D, ac as E, a9 as h, aa as k } from "./component.constants-Bn9l4N1t.js";
 import { useState as i, useRef as w, useEffect as B, useMemo as K } from "react";
-import { u as M, d as N, I as P, S as T } from "./EditorCard-BriyqUva.js";
+import { u as M, d as N, I as P, S as T } from "./EditorCard-DWz8Bm-e.js";
 const G = ({
   value: t = "",
   startIcon: p,
@@ -85,4 +85,4 @@ const G = ({
 export {
   G as S
 };
-//# sourceMappingURL=SingleSelectField-D1E9OJxC.js.map
+//# sourceMappingURL=SingleSelectField-BJnoOYrw.js.map

package/dist/{SingleSelectField-D1E9OJxC.js.map → SingleSelectField-BJnoOYrw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectField-D1E9OJxC.js","sources":["../src/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.tsx"],"sourcesContent":["import { FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { TextField } from '../../TextField/TextField';\nimport { SelectButton } from '../shared/SelectButton/SelectButton';\nimport { Dropdown } from '../../../shared/Dropdown/Dropdown';\nimport { SelectList } from '../shared/SelectList/SelectList';\nimport { SelectListOptions } from '../shared/SelectList/SelectListOptions/SelectListOptions';\nimport {\n  SelectListOption,\n  SelectListOptionProps,\n} from '../shared/SelectList/SelectListOptions/SelectListOption/SelectListOption';\nimport { debounce } from '../../../utils/debounce.utils';\nimport { IconSearch, TablerIcon } from '@tabler/icons-react';\nimport { useSelectSearchFocus } from '../shared/useSelectSearchFocus.hook';\n\nexport type SingleSelectFieldProps = {\n  options: SelectListOptionProps[];\n  startIcon?: TablerIcon;\n  value?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  isSearchable?: boolean;\n  isClearable?: boolean;\n  isLoading?: boolean;\n  noOptionsMessage?: string;\n  onChange: (value: string) => void;\n  onSearch?: (search: string) => void;\n};\n\nexport const SingleSelectField: FC<SingleSelectFieldProps> = ({\n  value = '',\n  startIcon,\n  options,\n  disabled,\n  placeholder,\n  isSearchable,\n  isClearable,\n  isLoading,\n  noOptionsMessage = 'No options available',\n  onChange,\n  onSearch,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchValue, setSearchValue] = useState<string>('');\n  const [selectedLabel, setSelectedLabel] = useState<string>(value);\n\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n  useSelectSearchFocus(isOpen, searchFieldRef);\n\n  useEffect(() => {\n    if (!value) {\n      setSelectedLabel('');\n      return;\n    }\n\n    const option = options.find((opt) => opt.value === value);\n    if (option) {\n      setSelectedLabel(option.label);\n    }\n  }, [value, options]);\n\n  const debouncedSearch = useMemo(() => (onSearch ? debounce(onSearch) : undefined), [onSearch]);\n\n  const displayOptions =\n    isSearchable && !onSearch\n      ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))\n      : options;\n\n  const handleChange = (newValue?: string) => {\n    setSearchValue('');\n    onChange(newValue ?? '');\n    onSearch?.('');\n\n    if (newValue === '') {\n      setSelectedLabel('');\n    } else {\n      const option = options.find((opt) => opt.value === newValue);\n      if (option) setSelectedLabel(option.label);\n    }\n  };\n\n  const handleSearch = (newSearch: string) => {\n    setSearchValue(newSearch);\n    debouncedSearch?.(newSearch);\n  };\n\n  return (\n    <Dropdown\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      disabled={disabled}\n      triggerComponent={\n        <SelectButton\n          startIcon={startIcon}\n          aria-label=\"Select option\"\n          placeholder={placeholder}\n          disabled={disabled}\n          valueLabel={selectedLabel}\n          onClear={() => handleChange('')}\n          isClearable={isClearable}\n          isLoading={isLoading}\n        />\n      }\n    >\n      <SelectList>\n        {isSearchable && (\n          <TextField\n            ref={searchFieldRef}\n            startIcon={IconSearch}\n            aria-label=\"Search options\"\n            placeholder=\"Search…\"\n            role=\"searchbox\"\n            value={searchValue}\n            onKeyDown={(e) => e.stopPropagation()}\n            onChange={handleSearch}\n          />\n        )}\n        <SelectListOptions disabled={isLoading}>\n          {displayOptions.map((option) => (\n            <SelectListOption\n              key={option?.value ?? option.label}\n              onClick={() => handleChange(option?.value)}\n              isSelected={option.value === value}\n              {...option}\n            />\n          ))}\n          {options.length === 0 && (\n            <SelectListOption disabled value=\"empty\" label={noOptionsMessage} />\n          )}\n        </SelectListOptions>\n      </SelectList>\n    </Dropdown>\n  );\n};\n"],"names":["SingleSelectField","value","startIcon","options","disabled","placeholder","isSearchable","isClearable","isLoading","noOptionsMessage","onChange","onSearch","isOpen","setIsOpen","useState","searchValue","setSearchValue","selectedLabel","setSelectedLabel","searchFieldRef","useRef","useSelectSearchFocus","useEffect","option","opt","debouncedSearch","useMemo","debounce","displayOptions","handleChange","newValue","handleSearch","newSearch","jsx","Dropdown","SelectButton","SelectList","TextField","IconSearch","jsxs","SelectListOptions","SelectListOption"],"mappings":"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"}
+{"version":3,"file":"SingleSelectField-BJnoOYrw.js","sources":["../src/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.tsx"],"sourcesContent":["import { FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { TextField } from '../../TextField/TextField';\nimport { SelectButton } from '../shared/SelectButton/SelectButton';\nimport { Dropdown } from '../../../shared/Dropdown/Dropdown';\nimport { SelectList } from '../shared/SelectList/SelectList';\nimport { SelectListOptions } from '../shared/SelectList/SelectListOptions/SelectListOptions';\nimport {\n  SelectListOption,\n  SelectListOptionProps,\n} from '../shared/SelectList/SelectListOptions/SelectListOption/SelectListOption';\nimport { debounce } from '../../../utils/debounce.utils';\nimport { IconSearch, TablerIcon } from '@tabler/icons-react';\nimport { useSelectSearchFocus } from '../shared/useSelectSearchFocus.hook';\n\nexport type SingleSelectFieldProps = {\n  options: SelectListOptionProps[];\n  startIcon?: TablerIcon;\n  value?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  isSearchable?: boolean;\n  isClearable?: boolean;\n  isLoading?: boolean;\n  noOptionsMessage?: string;\n  onChange: (value: string) => void;\n  onSearch?: (search: string) => void;\n};\n\nexport const SingleSelectField: FC<SingleSelectFieldProps> = ({\n  value = '',\n  startIcon,\n  options,\n  disabled,\n  placeholder,\n  isSearchable,\n  isClearable,\n  isLoading,\n  noOptionsMessage = 'No options available',\n  onChange,\n  onSearch,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchValue, setSearchValue] = useState<string>('');\n  const [selectedLabel, setSelectedLabel] = useState<string>(value);\n\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n  useSelectSearchFocus(isOpen, searchFieldRef);\n\n  useEffect(() => {\n    if (!value) {\n      setSelectedLabel('');\n      return;\n    }\n\n    const option = options.find((opt) => opt.value === value);\n    if (option) {\n      setSelectedLabel(option.label);\n    }\n  }, [value, options]);\n\n  const debouncedSearch = useMemo(() => (onSearch ? debounce(onSearch) : undefined), [onSearch]);\n\n  const displayOptions =\n    isSearchable && !onSearch\n      ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))\n      : options;\n\n  const handleChange = (newValue?: string) => {\n    setSearchValue('');\n    onChange(newValue ?? '');\n    onSearch?.('');\n\n    if (newValue === '') {\n      setSelectedLabel('');\n    } else {\n      const option = options.find((opt) => opt.value === newValue);\n      if (option) setSelectedLabel(option.label);\n    }\n  };\n\n  const handleSearch = (newSearch: string) => {\n    setSearchValue(newSearch);\n    debouncedSearch?.(newSearch);\n  };\n\n  return (\n    <Dropdown\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      disabled={disabled}\n      triggerComponent={\n        <SelectButton\n          startIcon={startIcon}\n          aria-label=\"Select option\"\n          placeholder={placeholder}\n          disabled={disabled}\n          valueLabel={selectedLabel}\n          onClear={() => handleChange('')}\n          isClearable={isClearable}\n          isLoading={isLoading}\n        />\n      }\n    >\n      <SelectList>\n        {isSearchable && (\n          <TextField\n            ref={searchFieldRef}\n            startIcon={IconSearch}\n            aria-label=\"Search options\"\n            placeholder=\"Search…\"\n            role=\"searchbox\"\n            value={searchValue}\n            onKeyDown={(e) => e.stopPropagation()}\n            onChange={handleSearch}\n          />\n        )}\n        <SelectListOptions disabled={isLoading}>\n          {displayOptions.map((option) => (\n            <SelectListOption\n              key={option?.value ?? option.label}\n              onClick={() => handleChange(option?.value)}\n              isSelected={option.value === value}\n              {...option}\n            />\n          ))}\n          {options.length === 0 && (\n            <SelectListOption disabled value=\"empty\" label={noOptionsMessage} />\n          )}\n        </SelectListOptions>\n      </SelectList>\n    </Dropdown>\n  );\n};\n"],"names":["SingleSelectField","value","startIcon","options","disabled","placeholder","isSearchable","isClearable","isLoading","noOptionsMessage","onChange","onSearch","isOpen","setIsOpen","useState","searchValue","setSearchValue","selectedLabel","setSelectedLabel","searchFieldRef","useRef","useSelectSearchFocus","useEffect","option","opt","debouncedSearch","useMemo","debounce","displayOptions","handleChange","newValue","handleSearch","newSearch","jsx","Dropdown","SelectButton","SelectList","TextField","IconSearch","jsxs","SelectListOptions","SelectListOption"],"mappings":";;;AA4BO,MAAMA,IAAgD,CAAC;AAAA,EAC5D,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAaC,CAAc,IAAIF,EAAiB,EAAE,GACnD,CAACG,GAAeC,CAAgB,IAAIJ,EAAiBb,CAAK,GAE1DkB,IAAiBC,EAAyB,IAAI;AACpD,EAAAC,EAAqBT,GAAQO,CAAc,GAE3CG,EAAU,MAAM;AACd,QAAI,CAACrB,GAAO;AACV,MAAAiB,EAAiB,EAAE;AACnB;AAAA,IACF;AAEA,UAAMK,IAASpB,EAAQ,KAAK,CAACqB,MAAQA,EAAI,UAAUvB,CAAK;AACxD,IAAIsB,KACFL,EAAiBK,EAAO,KAAK;AAAA,EAEjC,GAAG,CAACtB,GAAOE,CAAO,CAAC;AAEnB,QAAMsB,IAAkBC,EAAQ,MAAOf,IAAWgB,EAAShB,CAAQ,IAAI,QAAY,CAACA,CAAQ,CAAC,GAEvFiB,IACJtB,KAAgB,CAACK,IACbR,EAAQ,OAAO,CAACoB,MAAWA,EAAO,MAAM,cAAc,SAASR,EAAY,YAAA,CAAa,CAAC,IACzFZ,GAEA0B,IAAe,CAACC,MAAsB;AAK1C,QAJAd,EAAe,EAAE,GACjBN,EAASoB,KAAY,EAAE,GACvBnB,KAAA,QAAAA,EAAW,KAEPmB,MAAa;AACf,MAAAZ,EAAiB,EAAE;AAAA,SACd;AACL,YAAMK,IAASpB,EAAQ,KAAK,CAACqB,MAAQA,EAAI,UAAUM,CAAQ;AAC3D,MAAIP,KAAQL,EAAiBK,EAAO,KAAK;AAAA,IAC3C;AAAA,EACF,GAEMQ,IAAe,CAACC,MAAsB;AAC1C,IAAAhB,EAAegB,CAAS,GACxBP,KAAA,QAAAA,EAAkBO;AAAA,EACpB;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMtB;AAAA,MACN,cAAcC;AAAA,MACd,UAAAT;AAAA,MACA,kBACE6B,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAAjC;AAAA,UACA,cAAW;AAAA,UACX,aAAAG;AAAA,UACA,UAAAD;AAAA,UACA,YAAYa;AAAA,UACZ,SAAS,MAAMY,EAAa,EAAE;AAAA,UAC9B,aAAAtB;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJ,iCAAC4B,GAAA,EACE,UAAA;AAAA,QAAA9B,KACC2B,gBAAAA,EAAAA;AAAAA,UAACI;AAAA,UAAA;AAAA,YACC,KAAKlB;AAAA,YACL,WAAWmB;AAAA,YACX,cAAW;AAAA,YACX,aAAY;AAAA,YACZ,MAAK;AAAA,YACL,OAAOvB;AAAA,YACP,WAAW,CAAC,MAAM,EAAE,gBAAA;AAAA,YACpB,UAAUgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGdQ,gBAAAA,EAAAA,KAACC,GAAA,EAAkB,UAAUhC,GAC1B,UAAA;AAAA,UAAAoB,EAAe,IAAI,CAACL,MACnBU,gBAAAA,EAAAA;AAAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMZ,EAAaN,KAAA,gBAAAA,EAAQ,KAAK;AAAA,cACzC,YAAYA,EAAO,UAAUtB;AAAA,cAC5B,GAAGsB;AAAA,YAAA;AAAA,aAHCA,KAAA,gBAAAA,EAAQ,UAASA,EAAO;AAAA,UAAA,CAKhC;AAAA,UACApB,EAAQ,WAAW,KAClB8B,gBAAAA,EAAAA,IAACQ,GAAA,EAAiB,UAAQ,IAAC,OAAM,SAAQ,OAAOhC,EAAA,CAAkB;AAAA,QAAA,EAAA,CAEtE;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/SingleSelectFieldPro.js

@@ -1,6 +1,6 @@
 import { defineComponent as i } from "@embeddable.com/react";
-import { d as s, z as r, t as d, c as m, _ as c, V as n, o as u } from "./component.constants-DIhZCTG3.js";
-import { M as p, S as g } from "./index-C-zjH8iP.js";
+import { d as s, z as r, t as d, c as m, _ as c, V as n, o as u } from "./component.constants-Bn9l4N1t.js";
+import { M as p, S as g } from "./index-6ilf5W1J.js";
 const f = {
   name: "SingleSelectFieldPro",
   label: "Single Select Field",